React: Unexpected "Hooks can only be called inside the body of a function component."

[strayiker]

Do you want to request a feature or report a bug?
Report a bug.

What is the current behavior?
Using a custom hook from a locally linked package lead to the unexpected error "Hooks can only be called inside the body of a function component."

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Here is the github repository to reproduce this error
Steps:

• In the root folder run yarn
• In the hook folder run yarn link
• In the root run yarn link hook, then yarn start

You will see the error.

What is the expected behavior?
Code should work and do not throw an error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: 16.7.0-alpha.2
Browser: Chrome 70.0.3538.102
OS: Windows 7/10, Ubuntu 18.10

[gaearon]

It's expected. If you link from app to library, you need to link back from library/node_modules/react to app/node_modules/react so that you only have one copy of React. That's an existing problem — two copies of React commonly cause issues in apps. Hooks make this problem more immediate so you're forced to address it instead of causing more subtle issues.

We might need a better error message there but there's already another issue tracking that.

[strayiker]

Thanks!

[tuoxiansp]

I met the same problem when using lerna .
And fixed this with yarn workspace .

[kdela]

I met the same problem when using lerna .
And fixed this with yarn workspace .

@tuoxiansp Could you explain how did you resolve this issue with lerna?

[strayiker]

@kdela You can put your packages into monorepo and configure yarn workspaces for it. Then all you dependencies from all you workspaces (packages) will be installed into single node_modules folder. Including react. That leaves you with only one instance of react and problem is gone.

[aluminick]

I fixed this error by installing react-dom with same version as react

[sshmyg]

@strayiker If in root you use webpack to make a bundle with linked package, add alias to your configuration. This helped me avoid react dual copy.

resolve: {
        alias: {
            react: path.resolve('./node_modules/react'),
            'react-dom': path.resolve('./node_modules/react-dom')
        }
    },

[FreemenL]

There are also problems in my project. Both react and react-dom are the latest versions. The example of copying the official website after creating a new route cannot run

[nwparker]

There are also problems in my project. Both react and react-dom are the latest versions. The example of copying the official website after creating a new route cannot run

It doesn't look like you linked to a specific commit or code example. Maybe doing that could help others look at it (if you haven't solved it yet)

[gaearon]

Please read this page to the end:

https://reactjs.org/warnings/invalid-hook-call-warning.html

It contains most possible causes of this, as well as debugging strategies.

If you still have a problem, file a new issue with a reproducing project.