Doesn't automatically dedupe React

[fdw]

I've been trying to run a small project with vite-plugin-react-swc using MUI, but it always errored out with:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Adding resolve: {dedupe: ["react", "react-dom"]} to vite's config solves the problem. vite-plugin-react seems to automatically do this, so maybe it would be a good idea for this one, too?

[ArnaudBarre]

My personal opinion is that it's better to know that current lockfile is in a bad state, but for compatibility I will to it here too.

[fdw]

I'm sorry, what do you mean with "that current lockfile is in a bad state"? Are you talking about package-lock.json or something else? Maybe it's my fault after all 🙈

[ArnaudBarre]

What I mean is that your node_modules contains two version of React, either because some lib use a dependency on react instead of peerDependency, or because of not sync react and react-dom, or maybe something else. It's not your fault, can easily happen when doing an npm install on a project with an existing lockfile.

IMO the good solution there is to inspect the lockfile, see the two version installed and see what trigger it and then update the package.json to ensure that only one version of react(-dom) is needed

[fdw]

I've just checked npm ls react and npm ls react-dom, and while both show that a lot of packages depend on them, it's only ever version 18.2.0 :/

I think I've once read that the problem might occur because vite uses esm, but some modules might use cjs, and thus react will be loaded twice - can that happen? Would that be precented by dedupe?

[ArnaudBarre]

react still doesn't ship esm format (and if it did Vite should always enforce using the ESM one).

I'm curious on how you ended with this warning. The most probable in that case is a bug in the pre-bundling of deps with late discovered deps. And I will be surprised that dedupe help in that case, or maybe I'm wrong on how dedupe works in Vite

[fdw]

Thank you so much for your help, that clears things up a lot 🙂

Could it be a problem if one of the dependencies supports esm and depends on React?

Also, I'll try to build a mini test-case, if/when I have time... but that might be a bit...

[ArnaudBarre]

Did you found the root cause of the duplicate react module?

As I'm rethinking it now, React 17 did some internal changes to allow to have multiple react version on the same page (not in the same tree i think) so I would not force people to one version actually.

[fdw]

Unfortunately, I couldn't find the problem :(

Feel free to close this issue. If I can remember/find something, I'll just comment again.

Thanks for your time!