DEV Community

Discussion on: How to Create and Publish a React Component Library

Collapse
 
charlescollignon profile image
Charles

Hi ! Thank you a lot for this article and video, it helps me a lot !
I may have found something useful if you want to use external librairies (like material UI, HighchartJS, etc) and do some custom components in your npm package (storybook).

The error

Unhandled Runtime Error 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

The why

The React of the parent project is being used, instead of using the second, that is a duplicate React.

The solution

I found a solution (here and here) where you just have to add this line inside the rollup.config.js file :

external: ["react", "react-dom"],

Collapse
 
trandinhhiep789 profile image
eltr

That's really helpful. Thanks!

Collapse
 
blueberrychopsticks profile image
blueberrychopsticks

My fix was simply moving react and react-dom to peerDependencies in package.json

Collapse
 
alexeagleson profile image
Alex Eagleson

Good stuff, thanks for the resource!

Collapse
 
pavellaptev profile image
Pavel Laptev

That's really helpful. Thanks!

Collapse
 
harshdeepjft profile image
Harshdeep Saiyam

Thank you so much for sharing the solution!!!

Some comments have been hidden by the post's author - find out more