ReferenceError: "module is not defined" in Hydrogen/Remix Apps with new Vite when using @react-three/drei

[nhm1990]

What is the location of your example repository?

https://github.com/nhm1990/hydrogen-quickstart

Which package or tool is having this issue?

hydrogen-react

What version of that package or tool are you using?

2024.4.2

What version of Remix are you using?

2.8.0

Steps to Reproduce

1. Run sample repo "hydrogen-quickstart"
2. npm install
3. npm run dev
4. Open http://localhost:3000/
5. See error: ReferenceError: module is not defined

Expected Behavior

Sample .glb file is loaded in the canvas without errors and app works.

Actual Behavior

Error: "ReferenceError: module is not defined" appears

Could only reproduce it with hydrogen apps/remix since using Vite.
With pure remix, react or nextJS app it's working fine.

ReferenceError: module is not defined
at C:/Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@react-three/fiber/node_modules/react-reconciler/constants.js:6:3
at Object.runViteModule (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1181:17)
at ViteRuntime.directRequest (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1026:78)
at ViteRuntime.cachedRequest (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:949:28)
at request (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:976:128)
at /node_modules/@react-three/fiber/dist/index-ba8afaa4.esm.js?v=3cd111ea:3:31
at Object.runViteModule (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1181:11)
at ViteRuntime.directRequest (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1026:60)
at ViteRuntime.cachedRequest (Users/max.mustermann/Projects/Example Shopify/hydrogen-quickstart-1/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:950:79)
at /node_modules/@react-three/fiber/dist/react-three-fiber.esm.js?v=3cd111ea:1:110

Also with older versions it's not working.

Maybe related: facebook/react#20327

[frandiox]

Hi 👋
Please try what's explained here: #2129 (comment)

Let me know if that doesn't work.

[nhm1990]

Hey @frandiox , this did the trick. I had to add some more stuff to the array until it worked.
Thanks a lot!

export default defineConfig({
...
ssr: {
    optimizeDeps: {
      include: [
        '@react-three/fiber',
        '@react-three/drei',
        'react',
        'react-dom',
        'react-dom/client',
        'prop-types',
        'react-dropzone',
        'merge-value',
      ],
    },
  },
})