[v4] | Error: While trying to resolve module `normalize-svg-path`

[elpofigisto]

Bug

After package installation @gorhom/bottom-sheet and adding <BottomSheet ref.... to any of my files it causes the next error.

I've tried to install 'normalize-svg-path' with yarn, but it doesn't solve the problem.

error: Error: While trying to resolve module normalize-svg-path from file /Users/user/Project/node_modules/react-native-redash/lib/module/Paths.js, the package /Users/user/Project/node_modules/normalize-svg-path/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/user/Project/node_modules/node_modules/normalize-svg-path/index.mjs. Indeed, none of these files exist:

• /Users/user/Project/node_modules/node_modules/normalize-svg-path/index.mjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• /Users/user/Project/node_modules/node_modules/normalize-svg-path/index.mjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) at DependencyGraph.resolveDependency (/Users/user/Project/node_modules/node_modules/metro/src/node-haste/DependencyGraph.js:311:17) at Object.resolve (/Users/user/Project/node_modules/node_modules/metro/src/lib/transformHelpers.js:129:24) at resolve (/Users/user/Project/node_modules/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33) at /Users/user/Project/node_modules/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26 at Array.reduce () at resolveDependencies (/Users/user/Project/node_modules/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33) at processModule (/Users/user/Project/node_modules/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31) at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:95:5) at async addDependency (/Users/user/Project/node_modules/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)

Environment info

Library	Version
@gorhom/bottom-sheet	4.3.2
react-native	0.67.2
react-native-reanimated	2.9.1
react-native-gesture-handler	2.5.0

Steps To Reproduce

1. yarn add @gorhom/bottom-sheet@^4
2. add <BottomSheet....
3. error appears

Describe what you expected to happen:

1. BottomSheet with content should appear

Reproducible sample code

const bottomSheetRef = useRef<BottomSheet>(null) <BottomSheet ref={bottomSheetRef} index={1} snapPoints={[0, 100, 400]}> <View style={{ backgroundColor: "red" }}> <Text>Awesome 🎉</Text> </View> </BottomSheet>

[jrdn91]

How do I fix this, I'm having this issue too and I don't understand what the error is or what the fix is here

[elpofigisto]

How do I fix this, I'm having this issue too and I don't understand what the error is or what the fix is here

I tried to install dependencies manually, but anyway getting that error, so I decided to do a custom BottomSheet component using gesture handler and reanimated packages, but would be great to get this issue fixed.

[scottmas]

A dependency has begun using mjs and cjs file name paths but Metro doesn't support those yet. You need to tell Metro to use them manually like so:

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

// Generate config...

config.resolver.assetExts = [...defaultAssetExts, "cjs", "mjs"]

[elpofigisto]

@scottmas thank you, man! the solution works now