React hooks in react library giving Invalid hook call error

问题

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

回答1:

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:

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 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.

回答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/

回答3:

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.

回答4:

Maybe this will be helpful:

Link - how to create react component npm package with example

回答5:

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.

回答6:

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.

来源：https://stackoverflow.com/questions/56021112/react-hooks-in-react-library-giving-invalid-hook-call-error