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

[d-walsh]

• three version: 0.155.0
• @react-three/fiber version: 8.13.6
• @react-three/drei version: 9.80.1
• node version:
• npm (or yarn) version: 9.81

Problem description:

I get the following error when trying to use this library:

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

[fax1ty]

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

[chenkuangkuang]

@fax1ty V9.73.4 ?

[fax1ty]

@chenkuangkuang, yes

[d-walsh]

Is there anyway to fix this for the latest version of drei?

[blackroom24]

@fax1ty I tried rolling back to the version before FaceControls but am still facing this issue. Which version did you rollback to get it working ?

[Grano22]

I found solution, try to enable module (mjs) parsing in metro.config.js : https://gist.github.com/Grano22/f63698d5245beebeee7d5b57e0afd7df . It worked in my case.

[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

[srcnalt]

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

Exactly my case. Could you share which versions of packages you used?

[dhikicheeks]

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'],
   },
}

[Osmanity]

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

???

[PioterAndrzejewski]

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?

[Diego-Fdez]

Encontré una solución, intente habilitar el análisis del módulo (mjs) en metro.config.js : https://gist.github.com/Grano22/f63698d5245beebeee7d5b57e0afd7df . Funcionó en mi caso.

I found solution, try to enable module (mjs) parsing in metro.config.js : https://gist.github.com/Grano22/f63698d5245beebeee7d5b57e0afd7df . It worked in my case.

this work for me...

[SrengSecond]

does anyone know the last version that still work ?

[xr-dev-saurabh]

Did anyone find the solution? I'm running into the same issue. "WARNING in ./node_modules/@mediapipe/tasks-vision/vision_bundle.mjs Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:\Users\ADMIN\Desktop\Reealtech\editor\360-editor\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.js.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\ADMIN\Desktop\Reealtech\editor\360-editor\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.js.map'"

[MarkOdhiambo]

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'],
   },
}

Where are the sourcexits found in the project folder.