React: Hooks don't work with yarn link

[andy9775]

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

What is the current behavior?
When developing an external library locally and using yarn link to link the library to a local react app the "hooks can only be called inside the body of a function component" error comes up. However, after publishing to npm and using the published version in the local react app everything 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:

1. Create a library that's built with hooks (my-hooks-lib)
2. Create a local app that uses the library (my-react-app) using CRA
3. yarn link in my-hooks-lib and in my-react-app run yarn link my-hooks-lib

What is the expected behavior?
yarn start in the react app should use hooks and render normally

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react and react-dom 16.7.0-alpha.2
OSX

[gaearon]

It's not expected that it would work unless you link react back from your module to your app.

This has actually always been the case (React apps are subtly broken when there are two copies of React module). Hooks surface this immediately which I guess is good.

We do have another issue tracking a better error message for this case.

[andy9775]

My mistake - first time using yarn link with react. Thanks for addressing @gaearon

[corysimmons]

Is there a workaround for this? How can people locally test react components they want to turn into libraries? :

---

Workaround is https://github.com/whitecolor/yalc

[dcecile]

If your React app is bundled with Webpack, you can use a Webpack alias to force all React references to resolve to a single module. In your webpack.config.js:

{
    /* ... */
    module: {
        rules: [ /* ... */ ],
    },
    resolve: {
        alias: { react: require.resolve("react") }
    },
}

(Solution from https://github.com/webpack/webpack/issues/8607#issuecomment-453068938)

[maciekgrzybek]

@dcecile just to clarify, do you resolve that in the library you're working? or in the demo app?

[dcecile]

@maciekgrzybek I resolve it in the demo app

[maciekgrzybek]

Hey @dcecile thanks for a quick answer, sadly, that doesn't work for me as well.

[LucidityDesign]

I still get this error message even though I linked react and react-dom (via yarn link) and set react and react-dom as alias in my webpack.config:

'react': require.resolve('./node_modules/react'),
'react-dom': require.resolve('./node_modules/react-dom'),

[Blkc]

Currently there are like 3 ways you can install local dependencies,
1) yarn link
2) yarn add
3) yarn add .tgz file

npm pack on the library repository and yarn add .tgz file in the other repo seems to work for me. The other two give me the hook error.

[JerryGreen]

Workaround:

cd PACKAGE_YOU_DEBUG_LOCALLY
yarn link
yarn install
cd node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link
cd YOUR_PROJECT
yarn link PACKAGE_YOU_DEBUG_LOCALLY
yarn link react
yarn link react-dom

I find it easier than some webpack setup or using yet another package manager (yapm? yanc? yalc? wut?)

[kas]

If you're having this issue when developing a package that exports a React component, and you have a folder structure like this:

react-component-package/
  package.json
web-application/
  package.json

Assuming react-component-package has React as a dev and peer dependency, you can run this command from the react-component-package folder:
npm link ../web-application/node_modules/react

The same command should work with Yarn:
yarn link ../web-application/node_modules/react

https://stackoverflow.com/a/58612244

[danantal]

Will this be addressed somehow? I guess there is an workaround - but when you use create react app you can't really do any hacks in the webpack.config.js 😄

[brennick]

Btw we fixed this issue with the steps here: https://robkendal.co.uk/blog/2019-12-22-solving-react-hooks-invalid-hook-call-warning

[jsmapr1]

For those coming to the issue via a monorepo such as lerna, you can solve the problem by hoisting the dependencies to the root level.

https://github.com/facebook/react/issues/15097

[hugomallet]

React is great for components but it looks like everything around react is preventing you from creating components.
Configuring bundlers and npm dependencies to work with external components is really a hell. And with CRA this is almost impossible.
I beg you, please find a solution to this ! Maybe from webpack 5 module federation ?

[DLCnow]

Workaround:

cd PACKAGE_YOU_DEBUG_LOCALLY
yarn link
yarn install
cd node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link
cd YOUR_PROJECT
yarn link PACKAGE_YOU_DEBUG_LOCALLY
yarn link react
yarn link react-dom

I find it easier than some webpack setup or using yet another package manager (yapm? yanc? yalc? wut?)

It works! Tks!