react-native-svg-transformer unable to resolve module issue (Expo + TS)

I know what you're thinking: "Look it up! There are docs!"

The thing is, I have tried everything and exhausted all options. The strange part is the fact that I have done this before with no issues in other projects - tried copying those into this one to no avail.

The only. thing I can think of is there might be something wrong with my config or something. I honestly just need a second pair of eyes.

I'm using react-native-svg-transformer to load SVGs in a TypeScript-based Expo project.

The following are my deps:

"dependencies": {"babel-plugin-inline-dotenv": "1.7.0","dotenv": "16.0.1","expo": "45.0.6","expo-font": "10.1.0","expo-splash-screen": "0.15.1","expo-status-bar": "~1.3.0","firebase": "9.8.4","firebase-tools": "11.2.0","react": "17.0.2","react-dom": "17.0.2","react-native": "0.68.2","react-native-dotenv": "3.3.1","react-native-reanimated": "2.9.1","react-native-svg": "12.3.0","react-native-svg-transformer": "1.0.0","react-native-web": "0.17.7","styled-components": "5.3.5"  },

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');module.exports = (() => {  const config = getDefaultConfig(__dirname);  const { transformer, resolver } = config;  config.transformer = {    ...transformer,    babelTransformerPath: require.resolve('react-native-svg-transformer'),  };  config.resolver = {    ...resolver,    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),    sourceExts: [...resolver.sourceExts, 'svg'],  };  return config;})();

babel.config.js

module.exports = function (api) {  api.cache(true);  return {    presets: ['babel-preset-expo'],    // plugins: [    //   [    //     'module:react-native-dotenv',    //     {    //       moduleName: '@env',    //       path: '.env',    //     },    //   ],    // ],    plugins: ['react-native-reanimated/plugin'],  };};

Type declaration file:

declare module '*.svg' {  import React from 'react';  import { SvgProps } from 'react-native-svg';  const content: React.FC<SvgProps>;  export default content;}

Where I am importing the SVG:

import React from 'react';import { SvgProps } from 'react-native-svg';import Icon from './heart.svg';const HeartIcon = (props: SvgProps) => {  return <Icon {...props} />;};export default HeartIcon;

The error message:

Failed building JavaScript bundle.Unable to resolve module ./heart.svg from /Users/filippofonseca/Developer/Work/diush/diush-xyz/core/icons/auth/index.tsx: None of these files exist:  * core/icons/auth/heart.svg(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)  * core/icons/auth/heart.svg/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)  2 | import { StyleProp, ViewStyle } from 'react-native';  3 | import { SvgProps } from 'react-native-svg';> 4 | import Icon from './heart.svg';    |                   ^  5 |  6 | const HeartIcon = (props: SvgProps) => {  7 |   return <Icon {...props} />;Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/• should NOT have additional property 'nodeModulesPath'.

Thank you! If you see anything I may be doing wrong, let me know! Have followed the process in the docs and online like 5 times at this point and have gotten nowhere :)

Appreciate it.