drei: Unable to resolve "@mediapipe/tasks-vision" from "node_modules/@react-three/drei/index.cjs.js"

I had the same problem using

“@react-three/drei”: “^9.34.3”

my solution is to simply, just add ‘mjs’ in sourceExts, like so:

module. exports = {
   resolvers: {
     sourceExts: ['js', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
     assetExts: ['glb', 'gltf', 'png', 'jpg', 'hdr'],
   },
}

After adding metro.config.js I encountered a similar problem as @Osmanity and @blackroom24

I got passed the resolve problem by the provided solutions but run into the same problem as @blackroom24

@Grano22 Hey I tried editing metro config to include modules but after building the app I ran into these 2 errors

• ReferenceError: Property ‘atob’ doesn’t exist, js engine: hermes
• ERROR Invariant Violation: “main” has not been registered. This can happen if:
• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes

???

but my logs say:

` ERROR ReferenceError: Property ‘document’ doesn’t exist, js engine: hermes ERROR Invariant Violation: “main” has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes`

I can’t use anything from drei package regardless of the package versions used.

Anyone know how to deal with this?

@Grano22 Hey I tried editing metro config to include modules but after building the app I ran into these 2 errors

• ReferenceError: Property ‘atob’ doesn’t exist, js engine: hermes
• ERROR Invariant Violation: “main” has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes

I’ve only received this on React Native. My solution: roll back to an older version without FaceControls