pmndrs / drei

🥉 useful helpers for react-three-fiber
https://drei.pmnd.rs/
MIT License
7.87k stars 642 forks source link

Unable to resolve module `three-mesh-bvh` (Native / Expo) #636

Closed neilgamb closed 2 years ago

neilgamb commented 2 years ago

Problem description:

I just installed three, r3f and drei in an expo app via the instructions here.

The app is running on both native and web via expo's react-native-web interface. So far everything is working OK on web.

When importing import { useGLTF, Center } from '@react-three/drei/native' however, I am getting the following error message on the native device (iPad):


While trying to resolve module `three-mesh-bvh` from file `/Users/neilsongamble/Dev/Scandy/project-chewie/apps/frontend/node_modules/@react-three/drei/native/index.js`, the package `/Users/neilsongamble/Dev/Scandy/project-chewie/apps/frontend/node_modules/three-mesh-bvh/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/neilsongamble/Dev/Scandy/project-chewie/apps/frontend/node_modules/three-mesh-bvh/build/index.umd.cjs`. Indeed, none of these files exist:

  * /Users/neilsongamble/Dev/Scandy/project-chewie/apps/frontend/node_modules/three-mesh-bvh/build/index.umd.cjs(.native|.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)
  * /Users/neilsongamble/Dev/Scandy/project-chewie/apps/frontend/node_modules/three-mesh-bvh/build/index.umd.cjs/index(.native|.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)

IMG_66E12EFDEC16-1

Suggested solution:

none so far sorry

joshuaellis commented 2 years ago

This should go in the relevant repo, being three-mesh-bvh.... We can't do anything about it in this repo I don't think.

Although if it came to it I suppose we could move it to web only. But I feel like it's a straight forward fix for the other maintainer.

neilgamb commented 2 years ago

'... /three-mesh-bvh/build/index.umd.cjs(.native|.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)'

From the three-mesh-bvh team:

"Specifically it seems that expo is not trying to load index.umd.cjs (which exists if you look in the directory) and instead trying a variety of other extensions on the provided file instead, which is odd. The cjs extension is one of the recommended ways from node.js for distinguishing and supporting commonjs "require"-style files compared to modules (mjs) files."

xD3CODER commented 2 years ago

You should be able to solve this issue by adding cjs to your sourceExts in the babel config

CodyJasonBennett commented 2 years ago

Indeed, this is an issue with your metro configuration. See R3F's native installation instructions if you run into further trouble.