[Next.js] Module not found: Can't resolve './'
satelllte opened this issue Β· comments
Hi ππ»
The lib fails in Next.js with the following error on any import from @react-three/jolt
:
./node_modules/jolt-physics/dist/jolt-physics.wasm-compat.js:12:121
Module not found: Can't resolve './'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/@react-three/jolt/dist/index.mjs
./src/components/Scene/PhysicsDemo/PhysicsDemo.tsx
Example:
import {useEffect} from 'react';
import {Physics} from '@react-three/jolt';
export function PhysicsDemo() {
return (
<Physics>
<InnerComponents/>
</Physics>
);
}
Have you ever experienced such issue?
@isaac-mason is this some kind of WASM/Next.js issue?
Hi ππ»
This issue likely stems from how Next.js handles module resolution for WebAssembly files. To fix it, try adding the following to your next.config.js
:
const nextConfig = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.experiments = { asyncWebAssembly: true };
}
return config;
},
};
module.exports = nextConfig;
Ensure all dependencies are correctly installed:
npm install @react-three/jolt
If the issue persists, check the https://nextjs.org/docs/messages/module-not-found for further guidance.
Have you encountered this issue before or found a solution that works? Any additional details could help narrow down the problem.
Hi @r00ott ππ»
I haven't found any solution yet and I encountered this issue every time I tried to use Jolt with Next.js.
I've created a quick repo with jolt
branch which reproduces it:
satelllte/react-three-next-jolt#1
Tried to install Jolt and set asyncWebAssembly
, now it fails with the same error if I'm trying to do npm run build
, but if I try to run it in development via npm run dev
, the dev server gets stuck with Compiling / ...
message for ever, unfortunately.