remix dev is unusable if you have packages like framer-motion, react-three-fiber, etc.

[agcty]

What version of Remix are you using?

1.5.1

UPDATE:

Might be just the @react-three/drei dependency that's causing issues.

Steps to Reproduce

1. clone https://github.com/agcty/remix-three-test
2. pnpm install
3. pnpm run dev
4. Open the browser in incognito mode, otherwise there will be weird errors (seems to be an issue with react 18)
5. visit http://localhost:3000/ or http://localhost:3000/motion
6. Error occurs: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.
   Digging into console: Uncaught SyntaxError: Identifier 'React' has already been declared
7. git checkout react-17
8. try everything again, errors persist

Expected Behavior

remix dev works just like remix build && remix start

Actual Behavior

Throws: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.
Digging into console: Uncaught SyntaxError: Identifier 'React' has already been declared.

Basically, you can't use external libraries like react-three-fiber or framer-motion at all, neither with react 18 nor with react 17, effectively rendering remix dev unusable.

[agcty]

After further testing, it seems that only @react-three/fiber and @react-three/drei seem to have issues. framer-motion seems to work just fine actually, but the second you add a fiber or drei import (even on another route) it breaks, my example has both imports at the same time so I wrongfully assumed it's also framer-motion that doesn't work.

However, I'd still like to resolve the import issues with these 3d libraries as remix and fiber are a perfect pair. I'm not sure where to start and what the issue exactly is but it seems bundling is the culprit.

there are a few options of where this issue could be coming from:

1. the library is "broken", which seems unlikely because the output is just normal cjs/esm output
2. remix's bundling options are "wrong" (overwriting options with patch-package works Identifier 'React' has already been declared with multiple external libraries #2987 (comment))
3. issues with esbuild and external deps (Useless repeated imports when using external modules evanw/esbuild#475)

related issues

[agcty]

Tested even further and it seems like just react-three/drei might be the issue, not 100% sure but what's weird is that dev builds don't work and production builds work without issues.

[chaance]

It does appear to be an issue with @react-three/drei as far as I can tell. If you don't render <Box /> things work as expected. Digging in here!

[chaance]

I'm actually going to close this because I think the larger issue is captured in #2987. I'm going to dig in on the compiler and we'll track this bug there instead.

[agcty]

I'm actually going to close this because I think the larger issue is captured in #2987. I'm going to dig in on the compiler and we'll track this bug there instead.

Thanks @chaance! Tagged you in discord, might be some useful info for you there.