`Invalid hook call` issue related to duplicate react versions

[silverwind]

I encounted a issue with React Invalid hook call error when using this module inside a library module which is linked into another project via npm link and I think the way this module interacts with react-dom is the root cause which leads to two instances of react to be loaded in such scenarios. Also see this related StackOverflow answer.

I will try to provide a minimal reproduction, but ultimately i think this module needs to provide a <Toaster>-like component that the user can insert into the component tree somewhere to remove the react-dom dependency, maybe optionally.

[almond-bongbong]

First of all, thank you for reporting this issue.

As far as I know, the current module specifies peerDependencies to prevent duplicate loading. However, it seems that there might be an issue when using npm link. This does not appear to be an issue with the react-simple-toasts module itself. If there is any additional information that I might have missed, could you please provide more details?

Thank you!

[silverwind]

npm link just installs a symlink from node_modules/package to the folder, e.g. I do npm link module@./module. I will provide a reproduction later to allow, the root cause could be in my bundler (vite) as well.

I had this exact problem with other modules that depend on react-dom as well and I'm not sure solutions exists without removing this dependency.

[almond-bongbong]

Are you in a situation where Module A uses react-simple-toasts and this module is used in Project B? If so, I am curious if setting react and react-dom as peerDependencies in Module A resolves the issue.

[silverwind]

Yes exactly. In fact I already have these peerDependencies set in Module A, but it didn't help:

  "peerDependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }

Module B has:

  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
  }

I see this module has >=16.8.0 so it should resolve to the same version.