Identifier 'React' has already been declared with multiple external libraries

What version of Remix are you using?

1.4.1

Steps to Reproduce

More Details: React Version: 18 Yarn

• Install remix for cloudflare pages setup
• Add libraries like (react-spring, framer-motion, react-hook/mouse-postion)
• Use them (simple import is enough)

Expected Behavior

Application/Website loads correctly when running wrangler pages dev ./public and remix watch

Actual Behavior

Website loads, shows for a few ms, then breaks. Console sends multiple errors:

Uncaught SyntaxError: Identifier 'React' has already been declared

Uncaught Error: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.

Hydration failed because the initial UI does not match what was rendered on the server.

react-dom.development.js:86 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

The first error shows the error into the installed packages from above, always the same line (the first react import) var React = __toESM(require_react());

This happens to a lot of modules. You can fix that by renaming React to something else within the package and patching those with npx patch-package. But this makes things hard as you have to patch a lot of packages. It looks like something is going wrong during compilation (which naturally is part of remix - non-configurable).

Can somebody reproduce this issue?

Edit: Node Version: v16.13.2 Mac M1 Max

[chaance]

So does this mean a fix isn’t possible for now or this is a “won’t fix” type of issue?

Definitely looking to fix this. It’s still at the top of my priority list.

[chaance]

Looks like we were finally able to get this resolved! Updated to v1.7.0-pre.0 here and everything runs swimmingly. We should be able to close this after the stable release is published 🥳