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, [email protected]
, same for react-dom
. However, npm ls styled-components
gives back:
[email protected] /Users/pneedham/dev/tmp/test-app
└─┬ [email protected] invalid
└── [email protected] extraneous
npm ERR! invalid: [email protected] /Users/pneedham/dev/tmp/test-app/node_modules/react-component-library
npm ERR! extraneous: [email protected] /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.