Hooks don't work with yarn link

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:

Create a library that's built with hooks (my-hooks-lib)
Create a local app that uses the library (my-react-app) using CRA
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

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.

@gaearon

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

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

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 webpack/webpack#8607 (comment))

@dcecile

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

@maciekgrzybek

@maciekgrzybek I resolve it in the demo app

@dcecile

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

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'),

Currently there are like 3 ways you can install local dependencies,

yarn link
yarn add
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.

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?)

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

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 😄

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

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.

#15097

Those who still struggling with the issue and work with react-scripts without eject do the following to solve the issue:

yarn add @craco/craco
Change the package.json start script

From:

   "start": "react-scripts start",

To

   "start": "craco start",

Add craco.config.js file to your root application with the following content:

const path = require('path')

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
        },
    },
}

In YOUR_PROJECT's package.json add into a jest config section:

...
  "jest": {
    "moduleNameMapper": {
        "^react$": "<rootDir>/node_modules/react",
        "^react-dom$": "<rootDir>/node_modules/react-dom"
    }
  }
...

It worked for me

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!

This solution worked for me, Thanks a lot

I configured this in webpack 5 and it's working for me:

module.exports = {
  //...
  resolve: {
    symlinks: false,
  },
}

added yalc due to react/react#14257

@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?)

@jerrygreen thanks dude. You saved us. Works like a charm!

@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?)
@jerrygreen thanks dude. You saved us. Works like a charm!

Yes. Works like a charm, currently.

But someday, when you rm -rf node_modules or move the folder,

you will find, wow, something is screwed like a ****!

Yes. Works like a charm, currently.

But someday, when you rm -rf node_modules or move the folder,

you will find, wow, something is screwed like a ****!

What about a postinstall script that creates the links? So that once you delete node_modules and run npm install you get the links back?

I had the same problem in a Next.js app and solved the issue with the approach suggested by dcecile. I added this entry in next.config.js:

webpack: (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    react: path.resolve(__dirname, './node_modules/react'),
  };
  // Important: return the modified config
  return config;
},

Here are the docs for modifying Next.js webpack configuration.

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

cd PACKAGE_YOU_DEBUG_LOCALLY
yarn link
yarn install
yarn link react
yarn link react-dom

cd YOUR_PROJECT
yarn link PACKAGE_YOU_DEBUG_LOCALLY

I had problems using this workaround with React 18. The error was:

Module not found: Error: Can't resolve 'react-dom/client'

To make it work I had to downgrade to a previous React version.

Here the steps I followed:

go to package.json, and change the versions of both react and react-dom to:

    "react": "^17.0.2",
    "react-dom": "^17.0.2",

change index.js to:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

yarn install (I also deleted the node_modules folder before this, but it should not be necessary)
then follow the steps of the original workaround

I hope this can help in case someone ends up having the same issue.

Yalc worked for me also, seems like a great tool

I created a small command line tool that solved this issue for me by watching the build folder of a project when developing locally and installing it in the node_modules of a destination project: https://github.com/valdemarrolfsen/herd.js.

Its a quite simple tool but it worked perfectly for me at least :)

@blkc

Currently there are like 3 ways you can install local dependencies,

yarn link

yarn add

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.

perfect.

yarn add .tgz file

Thanks @blkc

@Omrilu-ma

Those who still struggling with the issue and work with react-scripts without eject do the following to solve the issue:

yarn add @craco/craco

Change the package.json start script

From:
   "start": "react-scripts start",
To
   "start": "craco start",
Add craco.config.js file to your root application with the following content:
const path = require('path')

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
        },
    },
}

based on @Omrilu-ma solution, i got the following error, "craco Module not found: Error: You attempted to import /node_modules/react which falls outside of the project src/ directory."

I Solved this problem with the following additional configuration in Craco:

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    },
    configure: (config, { env, paths }) => {

      const ModuleScopePlugin = config.resolve.plugins.find((plugin) => plugin instanceof ModuleScopePlugin);
      ModuleScopePlugin.allowedPaths.push(path.resolve(__dirname, './node_modules/react'));
      ModuleScopePlugin.allowedPaths.push(path.resolve(__dirname, './node_modules/react-dom'));

      return config;
    }
  },
};

Navigation Menu

Repository navigation

Hooks don't work with yarn link #14257

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

📋 Server Request & Proxy Logs

⚙️ Pengaturan Proxy Target

Hooks don't work with yarn link #14257

Description

Activity

gaearon commented on Nov 19, 2018

andy9775 commented on Nov 22, 2018

corysimmons commented on Jun 28, 2019

dcecile commented on Jul 5, 2019

maciekgrzybek commented on Jul 30, 2019

dcecile commented on Jul 30, 2019

maciekgrzybek commented on Jul 30, 2019

LucidityDesign commented on Dec 19, 2019

blkc commented on Feb 19, 2020

jerrygreen commented on Mar 5, 2020

kas commented on May 27, 2020

danantal commented on Jun 3, 2020

brennick commented on Sep 4, 2020

jsmapr1 commented on Sep 29, 2020

10 remaining items

Omrilu-ma commented on May 27, 2021

alex-ds commented on Jul 2, 2021

ramyNiranjan commented on Aug 8, 2021

ramyNiranjan commented on Aug 8, 2021

jquintozamora commented on Sep 22, 2021

muratx10 commented on Apr 13, 2022

zopelee commented on Apr 14, 2022

DaviDevMod commented on Apr 20, 2022

DaviDevMod commented on Apr 20, 2022

sickdyd commented on Jun 6, 2022

jakebanks commented on Jun 23, 2022

valdemarrolfsen commented on Jul 29, 2022

harpreetkhalsagtbit commented on Apr 26, 2023

Sassar88 commented on Jul 19, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions