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

nhm1990 commented 2 months ago

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

Run sample repo "hydrogen-quickstart"
npm install
npm run dev
Open http://localhost:3000/
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.

frandiox commented 2 months ago

Hi 👋 Please try what's explained here: https://github.com/Shopify/hydrogen/issues/2129#issuecomment-2119588510

Let me know if that doesn't work.

nhm1990 commented 2 months ago

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

Shopify / hydrogen