[on styled-components branch]: mismatching versions of React

[pneedham-mdsol]

Hi @HarveyD , I've run into an issue when on the styled-components branch of this repo: After switching to that branch, running npm install and npm build, I created a new create-react-app project, ran yarn add file:../../react-component-library/, added the TestComponent to the default App.js file, and after running yarn start, it leads to the error page with this text:

Error: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

npm ls react in the CRA project yields only one result, react@17.0.1, same for react-dom. However, npm ls styled-components gives back:

test-app@0.1.0 /Users/pneedham/dev/tmp/test-app
└─┬ react-component-library@1.0.0 invalid
  └── styled-components@5.1.1  extraneous

npm ERR! invalid: react-component-library@1.0.0 /Users/pneedham/dev/tmp/test-app/node_modules/react-component-library
npm ERR! extraneous: styled-components@5.1.1 /Users/pneedham/dev/tmp/test-app/node_modules/react-component-library/node_modules/styled-components

I believe this is caused by styled-components existing both as a dev and peer dependency. When attempting to build a similar component library, but without styled-components as a devDependency, that leads to storybook being unable to start.

Any ideas how this branch can both support Storybook as well as avoid the React mismatching versions error?

For context, I'm using create-react-app 4.0.1, yarn 1.22.5, node 12.19.0, and npm 6.14.8 on macOS.

[SimonKlausLudwig]

Similar problem here with emotion.sh

[blujedis]

you likely need to link React or styled-components to a single source. What I mean is say you have a lib that contains React or styled-components then your project does as well. This will cause a problem with some libs as you can only have once instance of them. React is this way.

To resolve cd into the instance of React (or other applicable lib)

cd node_modules/some_module
yarn link 

next go to the third party lib and link to that instance.

yarn link some_module

That should resolve the issue. Let me know if that helps as I believe that is your issue!

[HarveyD]

Closing. Solution by @blujedis should fix the problem. Please re-open issue persists.