Error when using hooks

[carloslfu]

I'm bootstrapping a React component library with this tool and I get: Hooks can only be called inside the body of a function component.

Steps to reproduce:

• Create a library with create-react-library.
• Update react and react-dom to v16.7.0-alpha.0 in ./package.json and ./src/package.json.
• Use new React hooks feature inside src/.

If you try the example you get the error. One weird thing is that if you use hooks in the example you don't get any error.

[monsterooo]

I also encountered this problem, I am looking for a problem. 😤

[sag1v]

Interesting, can you share a repo with an example?

[taylorham]

I made a quick repro repo if that helps: https://github.com/taylorham/hooks-issue

[taylorham]

I've found that the issue seems to come from using a "link:.." or "file:.." as the module source in package.json. If you push your project to a repository or npm and set it with "git+<some github url>" or "<npm package version>", it should work fine.

However, now you've got to commit, push (or publish), and reinstall the package every time you want to view a change, which adds a LOT of friction to the process.

Building with your own rollup.config.js or even using Webpack yields the same results.

I'm not sure if this issue is with npm/yarn and how they're reading local dependencies, or if it's to do with webpack-dev-server just loading them differently.

It's definitely not a problem with create-react-library, but it'll affect a lot of its users once Hooks are more mainstream. Might be nice to join forces with whichever team the hiccup is coming from to find a solution.

Does anyone have a clue which tree I should start barking up? I feel like the React devs should be alerted since it's makes developing Hooks-based libraries a real slog.

[taylorham]

Just found this today after a little more digging. So the React team is aware of it, and it occurs because of npm/yarn's resolution of linked dependencies and loading 2 copies of React.

Dan has made a few comments addressing this, but it seems it's relatively expected and unlikely to change in the near future.

A good fix for now is to make your example depend on your library's version of React by changing the example's package.json entry to:

"react": "link:../node_modules/react"

Hope this helps people who are itching to use Hooks ASAP!

[doasync]

Try to remove caret in your package.json for your React dependency:

    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2",

It worked for me: facebook/react#14454 (comment)

[levrik]

Neither @taylorham's nor @doasync's suggestion worked for me 😕

[doasync]

@levrik, you probably have two different versions of react

[levrik]

@doasync nope. I checked my bundle. It only includes one version of React. The issue is caused by another library which implements a custom renderer.

[antoniocapelo]

I'm also experiencing this issue, tried installing the exact same version but still get the same hook call error.

[charliesbot]

@antoniocapelo what I did was to remove react and react dom from devDependencies, as they are already peerDependencies in any parent project.

After that, it worked great.

[nickmcmillan]

I found that @taylorham 's worked, but it also needed the same change made for react-dom as well.
So in example/package.json

"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom"

Also FWIW, my parent package.json references version 16.8.1.

"react": "16.8.1",
"react-dom": "16.8.1"

Works fine.

[nardbagel]

Sorry, running into this now, Just curious when you say

"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom"

Is this in peerDependencies? I am trying to figure out how to get this issue resolved.

[markau]

@bwighthunter read it again, the change gets made in example/package.json, there is no peerDependencies in that lower level package.json

Confirming the answer provided by @nickmcmillan