React hooks in react library giving Invalid hook call error

Question

I create a react library using https://www.npmjs.com/package/create-react-library And successfully used it on other React project. But when I tried to use react hooks functionalities inside library it gives me following 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
.....

My Library I just tried to use useState as follows in my component.

import React, { useState } from 'react'

const General = (props) => {

    const [count, setCount] = useState(0);
    return (
        <div>
           General component
        </div>
    )
}

export default General

I am using "react": "^16.8.6" and "react-dom": "^16.8.6"

My React APP Created a application using https://github.com/facebook/create-react-app and used above library as follows.

import Reactfrom 'react'
import { General } from 'my.lib'
const accountSummary = props => {

  return (
    <div>
      <General>
    </div>
  )
}

export default accountSummary

Both has same react versions and library has used same react-dom and react versions as peerDependencies

One thing is for sure, You aren't breaking the Rules of Hooks. — Vencovsky, May 07 '19 at 11:03
The component looks ok. Check your React and React DOM version 16.8 (I assume that's is ok too). can you provide the whole minimum code to reproduce it? I have been trying to reproduce and I can't — F.bernal, May 07 '19 at 11:20
Make sure that the app in which you are using this library also has react 16.8 and above as well as the peer depedencies are correctly specified in the library — Shubham Khatri, May 07 '19 at 11:24
@F.bernal I edited my question based on your comments. Please check and thanks. — Janith Widarshana, May 07 '19 at 11:29
@Vencovsky what is the rule I am breaking. DO not have any idea. — Janith Widarshana, May 07 '19 at 11:30
@JanithWidarshana You AREN'T breaking any rule, you are using hooks correctly. — Vencovsky, May 07 '19 at 11:31
looks like everything here is working fine and problem is somewhere else — r g, May 07 '19 at 12:14
The issue is with I am running the library locally and has refer it using ` "my.library": "file:../my.library"` in py package.json. Lib is running separately in another react instance. If I publish it as npm library and use it works fine. — Janith Widarshana, May 08 '19 at 09:18
This is how you broke the rule ... You used a hook (say useState) in one of the component(of MyLibrary), which is bundled to dist/index.js by your Rollup (which is by default configured by create-react-library). When the bundling happened Your hook might got pushed to one of the condition (say if) and the rule broke!! — Yugandhar Pathi, Aug 06 '19 at 22:19
@YugandharPathi if that's the case, what is the solution? I think I may be having the same issue. React can't be so fragile that it cant handle bundling, can it? — Dave, Jul 12 '20 at 20:16
@Dave refering react library in main project via `file:../` worked for me. Did you try that? — Janith Widarshana, Jul 13 '20 at 05:36

Yugandhar Pathi · Accepted Answer · 2019-08-11T21:20:03.297

I was including my component library (for that matter any library) in my application as @Janith did using my-comp-lib:"file:../.." (I don't want to publish every time I want to test) and I encountered the same issue.

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:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

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 was able to fix this by making my app and library point to the same react (package) location.

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

It works!!

Please refer below links for more details ..

https://github.com/facebook/react/issues/14721

https://github.com/facebook/react/pull/14690

https://github.com/facebook/react/issues/13991

Note : This issue will not happen if you publish your package to artifactory and install because you will have react & react-dom as peer-dependencies and they won't get included in the distribution. So your package and application use the same react which is installed in the application.

Does react-dom need to be installed in the library? It is not explicitly imported in the library code that the OP wrote. — kas, May 27 '20 at 02:09
By the way, a more concise solution is to run this command from the library folder: "npm link ../web-application/node_modules/react". This is assuming the library and web application are in sibling folders. A similar command can be used if the library also needs to use react-dom. — kas, May 27 '20 at 02:11

score 2 · Answer 2 · answered Sep 10 '19 at 18:38

2

I just ran into the same issue. I was able to fix it by pointing to the same react in my example app as in my library:

App Structure

Root

Example
- package.json
src (library)
package.json

So, from the example > package.json I changed react to be:

    "react": "link:../node_modules/react",

This is much like the npm link listed above but it won't go away every time you npm install.

answered Sep 10 '19 at 18:38

busyPixels

306
1
4
16

Yes, this was the solution for me to get rid of the above issue. – Janith Widarshana Sep 11 '19 at 10:24
Be aware that newer versions of npm have deprecated link. Instead you need to use file: `"react": "file:../node_modules/react"` – RyanNerd May 15 '21 at 20:46

Michał · Answer 3 · 2019-09-28T06:41:03.387

2

Maybe this will be helpful:

Link - how to create react component npm package with example

edited Sep 28 '19 at 06:41

answered Sep 26 '19 at 19:51

Michał

266
3
9

1

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Das_Geek Sep 26 '19 at 20:03
This solved my problem. I was using npm link to test a package locally, which meant I had duplicated versions of React. – 321k Oct 23 '19 at 14:00
Very Good solution. – Mohammad Fallah Oct 01 '20 at 18:52

score 2 · Answer 4 · answered Jun 28 '20 at 12:46

2

Add to your Components Library's package.json

"peerDependencies": {
  "react": "<your version>"
}

so that your lib package will use the same react package as your main app. https://nodejs.org/es/blog/npm/peer-dependencies/

answered Jun 28 '20 at 12:46

Kostiantyn Hordiienko

21
2

score 1 · Answer 5 · answered May 07 '19 at 13:25

1

I have created a React library with create-react-library this library is your General component. I have published it to npm here https://www.npmjs.com/package/stackoverflow-test and a React app for use it here https://codesandbox.io/s/mm7yl83o28.

Just click on General component text and count will be incremented.

I cannot reproduce your issue, just use this test to check your implementation.

answered May 07 '19 at 13:25

F.bernal

2,294
2
19
26

Finally I found the issue. I installed "react-scripts" to my react app and it works fine now. – Janith Widarshana May 07 '19 at 14:29
Nice, so there was missing packets – F.bernal May 07 '19 at 14:39
The issue is with I am running the library locally and has refer it using ` "my.library": "file:../my.library"`. Lib is running separately in another react instance. If I publish it as npm library and use it works fine. – Janith Widarshana May 08 '19 at 09:18
Did you use hook inside component (say ) in stackoverflow-test ? – Yugandhar Pathi Aug 06 '19 at 22:21
@YugandharPathi yes – F.bernal Aug 07 '19 at 05:25
This issue will be seen only when you include local library using file:../ – Yugandhar Pathi Aug 09 '19 at 00:20

score 0 · Answer 6 · answered Jan 07 '20 at 20:53

0

It worked for me when I changed the link from the app to the library to be "link:../" instead of "file:../", in addition to linking react and react-dom.

answered Jan 07 '20 at 20:53

oligopol

680
9
14

3

I get an error "Unsupported URL Type "link:": when I try this. I'm on npm 6.4.1 – Ben Clayton Jun 23 '20 at 17:39

score 0 · Answer 7 · answered Apr 24 '21 at 15:18

React 17 + React Testing Library + Umi(a frontend framework, built-in react-router)

In my case, when I run the unit test, I got an error message "invalid hook call".

After a period of trying, I found two ways to solve.

Downgrade to React 16.x, then all will be fine.
Keep using React 17.x, and
- Still have to write import React from 'react'
- Install react-router-dom separately

I think it may be a problem with react-router, but due to my limited understanding, I don't have a better solution yet.

React hooks in react library giving Invalid hook call error

7 Answers7

Linked