DEV Community

Discussion on: Simplify your monorepo with npm 7 workspaces

Collapse
limal profile image
Łukasz Wolnik Author

Thanks, Sashi.

No idea what's wrong with it, sorry. I have never encountered the issue you're having.

Collapse
sashirachakonda profile image
sashiRachakonda

I believe its caused due to multiple copies (not versions) of React..
I do see multiple copies of react

  • one at the /create-react-app1 level
  • other at the root level. lib1 and/or lib2 require React. That get installed at the root node_modules level.

So, when rendering a view in the CRA, the app thinks there are multiple copies or React and hence the invalid hook call..

Not sure how to resolve this..

Thread Thread
limal profile image
Łukasz Wolnik Author

You're absolutely correct! In fact I had this problem myself but couldn't recognise it at first from invalid hook call.

Add below externals Webpack settings for lib1 and lib2 so that they don't bundle its own React but use whatever create-react-app1 is using.

webpack.common.js

module.exports = {
  ...
  externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
  },
};
Enter fullscreen mode Exit fullscreen mode
Thread Thread
sashirachakonda profile image
sashiRachakonda

i did add react and react-dom to the externals in lib1 and lib2...some reason, when i do the npm install at the root, i do see react and react-dom in the node_modules folder at the root..

i'll give it another shot...appreciate your comments..

Thread Thread
limal profile image
Łukasz Wolnik Author

No worries. I know it can be tricky.

Maybe try fixing for a single external lib1 and /create-react-app1 firstly. You might be very close to solving this but there's too many moving parts.

Good luck!

Thread Thread
sashirachakonda profile image
sashiRachakonda

If its not much trouble would it be possible to post your example on github ?

Thread Thread
limal profile image
Łukasz Wolnik Author

Good idea. I'll do it this weekend.