Using hook from dependency throws error Invalid hook call

[matteoferigo]

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

What is the current behavior?
I have a dependency collecting a list of shared hooks.
Whenever I try to run them, I get an Invalid hook call error. If I copy it in the main repo, the hook works as expected.

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:
In hooks repository:

import { useState } from 'react'

export function useFoo() {
  const [ foo, setFoo ] = useState()
  return [ foo, setFoo ]
}

In react app:

import { useFoo } from '@matteo/hooks'   // throws Invalid hook call
// import { useFoo } from './hooks'      // in-repo import works

export function MyComponent() {
  const [ foo, setFoo ] = useFoo()   // breaks here

  return <a onClick={setFoo}>{foo}</a>
}

What is the expected behavior?
I would define hooks into a separate repository, add the dependency in a react project, and get no error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Hooks repository:

"dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.8.6"
},

React app:

"dependencies": {
    "next": "^8.1.0",
    "next-transpile-modules": "^2.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-jss": "^8.6.1"
},

Maybe I'm not defining the hooks in the proper way... or maybe having react dependency even in my submodule generates a double React.
BTW: Next uses React v16.8.6, so React versions are the same in both repositories

[brizental]

I can confirm this. I'm having the same issue.

[kunukn]

So you are getting this?
https://reactjs.org/warnings/invalid-hook-call-warning.html

And from the given code, where the error happens
import { useFoo } from '@matteo/hooks'

And where it works
import { useFoo } from './hooks'

I would speculate this is happening
You might have more than one copy of React in the same app.

[matteoferigo]

@kunukn Yep

[callumjenkins]

I am also having the same issue

[matteoferigo]

Hi folks, I investigated quite a lot and finally I draw it out!
The problem is definitely related to the double instance of React (in both app and library), and that is not a good thing as @gaearon said here #14257 (comment)
The solution is simple, but I think it is worth to be explained somewhere in the Hooks documentation (maybe in the FAQs).

So if you want to create a separate library (eg: my-lib) containing a list of shared hooks in your app (eg: my-app) these are the steps to follow:

# Install React in your library
cd path/to/my-lib
npm i react
# Link the React dependency from your library
cd node_module/react`
npm link
# Use the linked React dependency in your app
cd path/to/my-app
npm link react

[marianadasilvadev]

I had a similar issue but with react-router and I was able to fix it using peerDependencies instead of npm link.
Here is the package.json from the library

"dependencies": {
   // ...  
  },
"devDependencies": {
  // ...
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^5.2.0",
},
"peerDependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^5.2.0"
},

And here is the package.json of the app that is consuming the library:

"dependencies": {
  "MY_LIB": "git+ssh:https://[email protected]/marianadev/MY_LIB",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^5.2.0"
},