Nwb: Invalid hook call when using yarn link

[tlindsay]

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 [email protected] for my lib, and react-hooks-toolbox is using [email protected].

[tlindsay]

I've discovered that this issue disappears if I $ rm -rf node_modules/ from my linked library.

[tlindsay]

Specifically, the problem is that my library includes a copy of react. I have react as a devDependency and a peerDependency.

[ianizaguirre]

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