ERR_REQUIRE_ESM when trying to use @react-three/xr with react-three-next

I am trying to add VR functionality to a project that uses react-three-next.

Just trying to import the VRCanvas with the line:

import { VRCanvas } from '@react-three/xr'

Fails with the error: ERR_REQUIRE_ESM Must use import to load ES Module: /…/app/node_modules/three/examples/jsm/loaders/GLTFLoader.js

I tried using next-transpile-modules to load @react-three/xr but it didn’t work. And also tried using the new next.js experimental ESM feature ( { esmExternals: “loose” } ) in next.config.js without success.

Am i missing something? Is this a problem with how react-three/xr is built?

Does anyone has an idea on how to make them work?

Thanks

[pfortes]

🌴 Success! 😄

I have managed to make it work!

it was a combination between activating the experimental esmExternals (i think this helps us with the Type: module thing) and correctly transpiling @react-three/xr and @webxr-input-profiles/motion-controllers

You can see the changes in https://github.com/pfortes/r3f-next-xr/commit/60db7ea9980f195ef3f32bee1e1991878c13ce09

And an updated sandbox at: https://codesandbox.io/s/optimistic-lamport-27d52?file=/next.config.js

Thanks for the help and motivation!

[pfortes]

I have tried to transpile the example but i keep getting an error.

What i noticed is that including @react-three/xr in the next-transpile-module brakes on the build stage, giving a slightly diferent error:

When i dont transpile anything or i transpile ‘three’ and ‘three/examples/jsm/loaders/GLTFLoader’ i get the error:

i will try to make a reproduction in a codesandbox so it is easier to test

Thank you