Invalid hook call error when I use my own library from styled-components

[aehp20]

I created my own UI tool from styled-components library (using typescript and rollup).

For example, I have the following component:

import styled from 'styled-components'

export const MyUITest2 = styled.div`
  color: red;
`

So, I use this component in another project:

<MyUITest2>This is my test</MyUITest2>

And, when I run the application, I get:

The above error occurred in the <styled.div> component:
in styled.div (at ...)
...

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

I think there is problem with styled-components because when I use a simple without styled-components, my component is displayed on the application.

Here my github repository: https://github.com/aehp20/ionic-react-my-ui-components

Thank you in advance!

[zantinger]

Give [email protected] a try.
#3037

[apennell]

@zantinger Thanks! I was experiencing the exact same issue--created a ui library with react and styled-components and attempted to load a really basic button into a clean create-react-app. It works fine if I don't use styled-components in the exported library button but as soon as I make it a styled button I get that error. I tried all the trouble-shooting in the link included with the error and confirmed all my versions matched, I correctly used devDeps and peerDeps, and I'm not using any hooks at all (so far just have really minimal repos for proof-of-concept). Changing styled components to 4.3.2 made it work!

But... after contemplating why I wouldn't be able to use the latest version of styled-components in a brand new library that's using the latest react and a brand new create-react-app, I remembered that I had set engines to a lower node version ("^6.10.0") because I'm ultimately using this in a production app that's using that. When I removed that engine setting I replaced styled-components to v5, it worked! So now to upgrade a big production app's node version... 🤞

[kitten]

So we can't easily help everyone with this but this is always a problem with duplicate react and react-dom versions; this may happen because:

• You depend on react and/or react-dom in your component library and it's duplicating them
• You may have accidentally bundled either of these packages in your bundle
• You may have symlinked your library's dependencies by use of yarn link or npm link

The first case is often easily checked using npm list or yarn list

[zantinger]

After running in the next error i extend my webpack config like this. Now styled components looks like to work in version 5

[riungemaina]

I had the same issue. But I had installed styled-components in my home directory instead of in the front-end which is where my react lives, after moving it the issue was resolved & I'm still using styled components 5.

Home Directory

Frontend
Backend

[louis-md]

So we can't easily help everyone with this but this is always a problem with duplicate react and react-dom versions; this may happen because:

• You depend on react and/or react-dom in your component library and it's duplicating them
• You may have accidentally bundled either of these packages in your bundle
• You may have symlinked your library's dependencies by use of yarn link or npm link

The first case is often easily checked using npm list or yarn list

Removing react and react-dom in the component library indeed solved the problem, thanks!

However, removing them makes the library far less practical. I used to preset components from other libraries like Material-ui, or re-write entirely new components, but I now have to choose between having a highly-customized components library, or using styled-components to style html elements and components I can't customize, which is a bit sad!

For instance I can't use expressions like this anymore, upon which I relied heavily in my own library:

const StyledMuiButton = styled(props =>
  <MuiButton {...props} {otherProps}>
      <OtherComponents>
         {props.children}
      <OtherComponents>
   </MuiButton>)`
  //Custom styles
`

Do you think there would be any solution to keep the best of both worlds, and export elaborate components like these using a library?

Thanks in advance!

Edit: I simply needed to move react and react-dom from "dependencies" to "peerDependencies" in package.json and now it works like a charm! 👍

[fkotsian]

The above error occurred in the <styled.div> component:
in styled.div (at ...)
...

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:

If anyone else is seeing this and moving out react and react-dom to peerDeps isn't doing it for you, move styled-components to a peerDependency in your component lib as well! Works like a charm

This guy tipped me off: https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library
also helpful! Similar issue when using styled in MaterialUi

[JakeMotta]

So we can't easily help everyone with this but this is always a problem with duplicate react and react-dom versions; this may happen because:

• You depend on react and/or react-dom in your component library and it's duplicating them
• You may have accidentally bundled either of these packages in your bundle
• You may have symlinked your library's dependencies by use of yarn link or npm link

The first case is often easily checked using npm list or yarn list

This ultimately ended up working for me (after scrapping my project setup and basically just copying/stripping https://github.com/React95/React95), in that I was using npm link to get code updates, but was running into the forementioned 'hook' error.

On that note though, any ideas on how to actually be able to use npm link without this hook error? It'd be nice to be able to edit code in my components library, and have those changes simultaneously update in my other project.

[spirit1834]

Give [email protected] a try. #3037
Thank you very much, kind man

[gerald-va-experts]

@zantinger Thanks! I was experiencing the exact same issue--created a ui library with react and styled-components and attempted to load a really basic button into a clean create-react-app. It works fine if I don't use styled-components in the exported library button but as soon as I make it a styled button I get that error. I tried all the trouble-shooting in the link included with the error and confirmed all my versions matched, I correctly used devDeps and peerDeps, and I'm not using any hooks at all (so far just have really minimal repos for proof-of-concept). Changing styled components to 4.3.2 made it work!

But... after contemplating why I wouldn't be able to use the latest version of styled-components in a brand new library that's using the latest react and a brand new create-react-app, I remembered that I had set engines to a lower node version ("^6.10.0") because I'm ultimately using this in a production app that's using that. When I removed that engine setting I replaced styled-components to v5, it worked! So now to upgrade a big production app's node version... 🤞

it works for me as well, thanks

[gerald-va-experts]

Give [email protected] a try. #3037

it works for me as well. thanks

[opensrc0]

I have tried most of the solution but didn't worked for me, so I have done some debugging and found a solution.

Failed: Tried to link styled-component and react. but won't help because when you will link one package other linked package will be removed.

npm link ../<consmer-package>/node_modules/react
 
npm link ../<consmer-package>/node_modules/styled-components

Worked Link the consumer-package as well as all the peer dependency and run in one single command.

npm link ../<consmer-package> ../<consmer-package>/node_modules/peerDependency-1 ../<consmer-package>/node_modules/peerDependency-2 ../<consmer-package>/node_modules/peerDependency-n

Note:

1. consmer-package is your library name
2. peerDependency-1, peerDependency-2, peerDependency-n is name of peer dependency used by library.

Stackoverflow: https://stackoverflow.com/a/77781022/2980414