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

[filipdanic]

Seems like you also have to update "react-scripts": "file:../node_modules/react-scripts", in example/package.json

(file if you’re using npm, link if you’re using yarn)

This PR seems good: https://github.com/transitive-bullshit/create-react-library/pull/134/files

[abhimanyuPathania]

I had to explicitly run yarn install in the examples directory after applying solution given by @nickmcmillan

[djnorrisdev]

I'm a beginner to this, so I don't know how to actually integrate my solution into create-react-library (yet). I've updated all the babel and react packages, and posted it to my github. It doesn't have the cool walkthrough of package creation that npx create-react-library generates when installing, but I want to do a proper fix when I figure out how to do it. This fix happened because @material/core now uses react hooks under the hood, and breaks create-react-library.

[corysimmons]

This is a problem caused by 2 different versions of React being used: 1 for the React component you're trying to bundle up, 1 for the React example you're using.

One of them loads first, and when your hooky component gets loaded, another React fires up and is like "Whoa! You can't do hook stuff right here!"

The best way I've found around this is to completely give up on npm/yarn link and use https://github.com/whitecolor/yalc

It's not perfectly convenient as it's not a symlink and you have to reinstall your local pkg every time you want to test it, but at least you can get around this hook/link seemingly unsolvable problem.

[sebasgavi]

@corysimmons I LOVE YOU, yalc was the only thing that worked for me.

[corysimmons]

Forgot to update my comments on this kind of stuff, but yalc can be config'd to just auto-update the pkg you're working on using nodemon (or any cli watcher).

Add "watch:yalc": "nodemon -x yalc push" to your "scripts" object in package.json in the lib you're creating. And obviously run it.

Now every time you change anything in your local lib, it will update that pkg anywhere it has been installed (locally) automatically.

I love you too @vagyriag 💖

[Andycharalambous]

Unfortunately this doesn’t appear to trigger a hot reload in the example app - but at least the hooks errors are gone.

[KhaledAylii]

I know this might not be the answer you're looking for, but according to React docs, this is not an error, but a feature by design. You can find the reference here: https://reactjs.org/docs/hooks-overview.html

[transitive-bullshit]

I believe this should now be fixed via #151 and the other major changes made in the latest v3 release.

Please let me know if this is not the case.

[BRoy98]

I know this might not be the answer you're looking for, but according to React docs, this is not an error, but a feature by design. You can find the reference here: https://reactjs.org/docs/hooks-overview.html

Not sure why this answer does not have any positive reactions. I was having the same error, I added hook in a regular JS function instead of React function. Thanks, man! 🎉