Unable to resolve module `./elements/Shape`

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 (<anonymous>)\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 (<anonymous>)\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?