Invalid hook call when using yarn link
tlindsay opened this issue · comments
This issue is a: Bug report
node v13.3.0
yarn v1.22.4
nwb v0.24.5 & v0.23.0 confirmed
I'm developing a library which uses useState
and useEffect
hooks using the react-component
nwb template. It works great in the demo/
app.
I tried using $ yarn link
to test my library in an app, and I get Invalid hook call. Hooks can only be called inside of the body of a function component.
I'm new to React, so I assumed I must be doing something wrong with my build, so I started looking around for examples. I found react-hooks-toolbox and decided to see how that's configured. I added it as a dependency to my project, and confirmed that I could import the simplest hook defined in that project (useDebounce
). That worked perfectly.
After that, I cloned the repo, installed deps, ran $ yarn build
and linked it up. At that point, my app started throwing the same Invalid hook call
on the useDebounce
hook.
I'm using nwb@0.24.5
for my lib, and react-hooks-toolbox
is using nwb@0.23.0
.
I've discovered that this issue disappears if I $ rm -rf node_modules/
from my linked library.
Specifically, the problem is that my library includes a copy of react
. I have react
as a devDependency
and a peerDependency
.
@tlindsay
This is a common problem that only occurs when you Link, it does not occur if the package is published.
The solution to solve this "linking" issue, is to add this into your main projects NWB config.
webpack: {
aliases: {
react: path.resolve('./node_modules/react'),
},
},
This issue solves the "Invalid Hook Call" problem that occurs when you Npm Link a library that uses hooks into your project.