Discussion on: Simplify your monorepo with npm 7 workspaces

View post

Replies for: Thanks for this article. I was able to able to follow the article and try out the running example. trying to apply the same to one of my projects...

Łukasz Wolnik • Jun 14 '21

Thanks, Sashi.

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

sashiRachakonda • Jun 14 '21

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..

Łukasz Wolnik • Jun 14 '21

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",
    },
  },
};

sashiRachakonda • Jun 14 '21

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..

Łukasz Wolnik • Jun 14 '21

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!

sashiRachakonda • Jun 16 '21

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

Łukasz Wolnik • Jun 16 '21

Good idea. I'll do it this weekend.