Unable to resolve module `./elements/Shape`

[vijay-dadhich09]

Hi I am getting the following error on android with this below line. Any idea what is the issue?

import Svg, { Path } from 'react-native-svg';

Package "react-native-svg": "^9.9.4", "react-native": "0.59.8",

Error The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body: {"originModulePath":"/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts","targetModuleName":"./elements/Shape","message":"Unable to resolve module ./elements/Shape from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts: The module ./elements/Shape could not be found from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts. Indeed, none of these files exist:\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape/index(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)","errors":[{"description":"Unable to resolve module ./elements/Shape from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts: The module ./elements/Shape could not be found from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts. Indeed, none of these files exist:\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape/index(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)"}],"name":"Error","stack":"Error: Unable to resolve module ./elements/Shape from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts: The module ./elements/Shape could not be found from /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/ReactNativeSVG.ts. Indeed, none of these files exist:\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)\n /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/react-native-svg/src/elements/Shape/index(.native||.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)\n at ModuleResolver.resolveDependency (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)\n at ResolutionRequest.resolveDependency (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n at DependencyGraph.resolveDependency (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)\n at Object.resolve (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:261:42)\n at /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31\n at Array.map ()\n at resolveDependencies (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)\n at /Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33\n at Generator.next ()\n at asyncGeneratorStep (/Users/vijdadhi/Public/personal/projects/TCP/code4/packages/mobileapp/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)"} processBundleResult BundleDownloader.java:296 access$200 BundleDownloader.java:37 onResponse BundleDownloader.java:174 execute RealCall.java:206 run NamedRunnable.java:32 runWorker ThreadPoolExecutor.java:1162 run ThreadPoolExecutor.java:636 run Thread.java:764

[Relax594]

resolver: { sourceExts: ['js', 'json', 'jsx', 'ts', 'tsx'], },

in your metro.config.js add 'tsx' here and it's working fine again.

[a4abs]

I am getting the same type of issue.

Unable to resolve "./elements/ForeignObject" from "node_modules/react-native-svg/src/ReactNativeSVG.ts"

I'm using expo-CLI to build a react-native app. "react-native-svg": "9.13.3"

import React from "react";
import {
  Image,
  Platform,
  TextInput,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";

import { Svg, Path, G, Rect } from "react-native-svg";

const SvgComponent = () => {
  return(
   <Svg
                height="100"
                width="100"
                viewBox="40 20 100 40"
                preserveAspectRatio="none">
                <G>
                  <Rect
                    x="0"
                    y="0"
                    width="100"
                    height="100"
                    fill="red"
                  />
                </G>
  </Svg>
}

export default SvgComponent

Is something missing in my implementation?

[walosha]

I am getting the same issue

Unable to resolve "./elements/ForeignObject" from "node_modules\react-native-svg\src\ReactNativeSVG.ts" Failed building JavaScript bundle. Unable to resolve "./elements/ForeignObject" from "node_modules\react-native-svg\src\ReactNativeSVG.ts" Failed building JavaScript bundle.

//Package.json

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "expo": "~36.0.0", "link": "^0.1.5", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", "react-native-copilot": "^2.4.7", "react-native-svg": "9.13.3", "react-native-web": "~0.11.7" }, "devDependencies": { "babel-preset-expo": "~8.0.0", "@babel/core": "^7.0.0" }, "private": true }

[maks112v]

Unable to resolve "./elements/ForeignObject" from "node_modules/react-native-svg/src/ReactNativeSVG.ts"

Also getting that issue

[abrahamdio]

I am also getting the same issue. Have the exact dependencies as https://github.com/react-native-community/react-native-svg/issues/1113#issuecomment-599181634

[mathritter]

I am having the same issue. How the solution below should work using expo? I can't find metro.config.js. Tried creating it and didn't work either.

resolver: { sourceExts: ['js', 'json', 'jsx', 'ts', 'tsx'], },

in your metro.config.js add 'tsx' here and it's working fine again.

[ghost]

If you previously modifed the app.json, try to look around json syntax errors, it will resolve problem.

[whatdtech]

If anyone is facing above issues with react-native-svg it is probably due to compatibilty issues with react-native-svg >=12.0.0. Try yarn add react-native-svg@11.0.0 . In my case problem was solved.