[Next.js] Module not found: Can't resolve './'

[satelllte]

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?

[DennisSmolek]

@isaac-mason is this some kind of WASM/Next.js issue?

[r00ott]

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.

[satelllte]

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: https://github.com/satelllte/react-three-next-jolt/pull/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.