Hooks don't work with yarn link #14257

andy9775 · 2018-11-17T05:32:30Z

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

The text was updated successfully, but these errors were encountered:

gaearon · 2018-11-19T17:04:42Z

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 · 2018-11-22T01:59:05Z

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

corysimmons · 2019-06-28T10:50:51Z

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 · 2019-07-05T16:22:19Z

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

maciekgrzybek · 2019-07-30T13:03:25Z

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

dcecile · 2019-07-30T15:16:52Z

@maciekgrzybek I resolve it in the demo app

maciekgrzybek · 2019-07-30T15:57:05Z

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

LucidityDesign · 2019-12-19T16:22:30Z

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 · 2020-02-19T14:25:45Z

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.

jerrygreen · 2020-03-05T11:33:21Z

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 · 2020-05-27T03:02:29Z

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 · 2020-06-03T14:16:04Z

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 😄

aud · 2021-05-04T23:45:58Z

@jaguardo in my experience Yalc removed a ton of the complexity that you would otherwise have to manage with symlinks yourself. Have been using it for a year or so now and the quality is very high. Worth giving it a shot for your use case.

eric-burel · 2021-05-05T17:50:59Z

For googlers, this issue can also be encountered for project using Webpack 4 and transitionning to Webpack 5. If I sum it up, yalc link does the reverse of yarn link regarding node_modules, favouring those of the project that rely on the package to avoid duplicates? By the way Meteor works this way when using METEOR_PACKAGE_DIRS, which has always been extremely more intuitive than link.
If yes that would solve the issue more elegantly.

regalstreak · 2021-05-08T21:28:44Z

Nothing worked but yalc for me

L0rdH4x0r · 2021-05-11T07:29:53Z

Nothing from the above was needed! I got mine fixed by just keeping react and react-dom only as peerDependencies in package.json and delete all other occurrences. After that delete node_modules and package-lock.json and install again. Then in should work.

eric-burel · 2021-05-11T08:35:24Z

Nothing from the above was needed! I got mine fixed by just keeping react and react-dom only as peerDependencies in package.json and delete all other occurrences. After that delete node_modules and package-lock.json and install again. Then in should work.

Most often, you cannot do this during development though, as you may need React for unit testing or 3rd party tools like Storybook. In a mono-repo, even if React is a peer-dependency of your package, it will fetch the "closest" version, so from your monorepo main node_modules instead of those from the app.
I've tested Yalc, with some success at the moment, though I am still not sure of the precise differences with a "normal" npm install.
This is how we intend to solve this for good in the future, taking inspiration from Meteor solution for this issue, based on an NPM_PACKAGE_DIRS environment variable: VulcanJS/vulcan-next#104

gjolund · 2021-05-11T16:18:43Z

yalc is the only solution to this problem (and the myriad of other issues caused by yarn/npm link) that consistently works.

Its pretty troubling that both yarn and npm seem convinced that naively symlinking entire directories ever worked.

Omrilu-ma · 2021-05-27T10:48:02Z

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

alex-ds · 2021-07-02T11:22:45Z

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

ramyNiranjan · 2021-08-08T18:26:15Z

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!

ramyNiranjan · 2021-08-08T18:26:49Z

This solution worked for me, Thanks a lot

jquintozamora · 2021-09-22T07:16:48Z

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

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

muratx10 · 2022-04-13T20:05:33Z

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!

zopelee · 2022-04-14T01:41:29Z

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 ****!

DaviDevMod · 2022-04-20T17:48:46Z

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?

DaviDevMod · 2022-04-20T18:44:50Z

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.

sickdyd · 2022-06-06T01:50:23Z

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.

jakebanks · 2022-06-23T03:48:23Z

Yalc worked for me also, seems like a great tool

valdemarrolfsen · 2022-07-29T11:40:57Z

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

harpreetkhalsagtbit · 2023-04-26T21:44:01Z

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

Sassar88 · 2023-07-19T06:50:41Z

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;
    }
  },
};

gaearon closed this as completed Nov 19, 2018

taylorham mentioned this issue Dec 15, 2018

Error when using hooks transitive-bullshit/create-react-library#99

Closed

jlengstorf mentioned this issue Feb 12, 2019

gatsby-develop | useState from react hooks doesn't work in development environment gatsbyjs/gatsby#9489

Closed

theKashey mentioned this issue Feb 12, 2019

Hooks + multiple instances of React #13991

Open

hubgit mentioned this issue Mar 4, 2019

Hot-reloading doesn't work with 'yarn link' modules with hooks. gaearon/react-hot-loader#1171

Open

vedrani mentioned this issue Mar 11, 2019

Add symlink yarn command and document linking toptal/picasso#110

Merged

5 tasks

petyosi mentioned this issue May 5, 2019

Can't use hooks when react & react-dom are dev dependencies jaredpalmer/tsdx#64

Closed

MarkosKon mentioned this issue May 23, 2019

Create the example projects MarkosKon/accessible-navbar#2

Closed

matteoferigo mentioned this issue Jun 18, 2019

Using hook from dependency throws error Invalid hook call #15706

Closed

dcecile mentioned this issue Jul 5, 2019

React Hooks not working + single instance of React #15338

Closed

jkomyno mentioned this issue Nov 5, 2019

Haste Module naming collision jkomyno/react-native-user-inactivity#29

Closed

This was referenced Nov 29, 2019

Uncaught Error: Invalid hook call. ianstormtaylor/slate#3164

Closed

useLayoutEffect does nothing on the server ianstormtaylor/slate#3163

Closed

addstar34 mentioned this issue Dec 22, 2019

How to yarn link swr? Error: Invalid hook call vercel/swr#210

Closed

pmespresso mentioned this issue Jan 6, 2020

Working with local yarn packages paritytech/Nomidot#65

Closed

jscheel mentioned this issue Mar 10, 2020

Loading multiple copies of framer-motion breaks in subtle ways motiondivision/motion#477

Closed

adamjmcgrath mentioned this issue May 7, 2020

[SDK-1580] [SDK-1581] Add withAuth and withLoginRequired auth0/auth0-react#7

Merged

3 tasks

dwjohnston mentioned this issue May 29, 2020

Lerna should ignore peer/dev dependencies of symlinked packages. lerna/lerna#2605

Closed

eric-burel mentioned this issue May 10, 2021

NPM_PACKAGE_DIRS to mimick a local package directory VulcanJS/vulcan-next#104

Open

samsam-ahmadi mentioned this issue Jul 29, 2021

Update storybook samsam-ahmadi/react-trip-date#27

Merged

4 tasks

JiangWeixian mentioned this issue Aug 13, 2021

fix yarn link hooks invaild / 修复 yarn link hooks 不可用 JiangWeixian/cheatsheets#185

Open

3DJakob mentioned this issue Oct 7, 2021

Error: Invalid hook call. 3DJakob/react-tinder-card#61

Closed

bennobuilder added a commit to bennobuilder/dynamic-styles that referenced this issue Nov 14, 2021

added yalc due to facebook/react#14257

f40a167

gluxon mentioned this issue Jan 9, 2022

feat: pnpm add <pkg> autoinstalls any missing peer dependencies pnpm/pnpm#4213

Merged

Vanals mentioned this issue May 5, 2022

ci(PPDSC-2017): newskit integration test newscorp-ghfb/NewsKit#183

Merged

8 tasks

amenk mentioned this issue Feb 4, 2023

Document how to work with the otp-ui packages during development opentripplanner/otp-react-redux#773

Open

srosset81 mentioned this issue Oct 16, 2023

Fix version mismatch error assemblee-virtuelle/semapps#1180

Closed

williamsyang-work mentioned this issue Jan 24, 2024

Issue Linking TraceViewer packages eclipse-cdt-cloud/vscode-trace-extension#175

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hooks don't work with yarn link #14257

Hooks don't work with yarn link #14257

andy9775 commented Nov 17, 2018 •

edited

Loading

gaearon commented Nov 19, 2018

andy9775 commented Nov 22, 2018

corysimmons commented Jun 28, 2019 •

edited

Loading

dcecile commented Jul 5, 2019 •

edited

Loading

maciekgrzybek commented Jul 30, 2019

dcecile commented Jul 30, 2019

maciekgrzybek commented Jul 30, 2019

LucidityDesign commented Dec 19, 2019

blkc commented Feb 19, 2020 •

edited

Loading

jerrygreen commented Mar 5, 2020 •

edited

Loading

kas commented May 27, 2020

danantal commented Jun 3, 2020

aud commented May 4, 2021

eric-burel commented May 5, 2021

regalstreak commented May 8, 2021

L0rdH4x0r commented May 11, 2021 •

edited

Loading

eric-burel commented May 11, 2021 •

edited

Loading

gjolund commented May 11, 2021 •

edited

Loading

Omrilu-ma commented May 27, 2021

alex-ds commented Jul 2, 2021

ramyNiranjan commented Aug 8, 2021

ramyNiranjan commented Aug 8, 2021

jquintozamora commented Sep 22, 2021

muratx10 commented Apr 13, 2022

zopelee commented Apr 14, 2022

DaviDevMod commented Apr 20, 2022 •

edited

Loading

DaviDevMod commented Apr 20, 2022

sickdyd commented Jun 6, 2022 •

edited

Loading

jakebanks commented Jun 23, 2022

valdemarrolfsen commented Jul 29, 2022

harpreetkhalsagtbit commented Apr 26, 2023 •

edited

Loading

Sassar88 commented Jul 19, 2023

Hooks don't work with yarn link #14257

Hooks don't work with yarn link #14257

Comments

andy9775 commented Nov 17, 2018 • edited Loading

gaearon commented Nov 19, 2018

andy9775 commented Nov 22, 2018

corysimmons commented Jun 28, 2019 • edited Loading

dcecile commented Jul 5, 2019 • edited Loading

maciekgrzybek commented Jul 30, 2019

dcecile commented Jul 30, 2019

maciekgrzybek commented Jul 30, 2019

LucidityDesign commented Dec 19, 2019

blkc commented Feb 19, 2020 • edited Loading

jerrygreen commented Mar 5, 2020 • edited Loading

kas commented May 27, 2020

danantal commented Jun 3, 2020

aud commented May 4, 2021

eric-burel commented May 5, 2021

regalstreak commented May 8, 2021

L0rdH4x0r commented May 11, 2021 • edited Loading

eric-burel commented May 11, 2021 • edited Loading

gjolund commented May 11, 2021 • edited Loading

Omrilu-ma commented May 27, 2021

alex-ds commented Jul 2, 2021

ramyNiranjan commented Aug 8, 2021

ramyNiranjan commented Aug 8, 2021

jquintozamora commented Sep 22, 2021

muratx10 commented Apr 13, 2022

zopelee commented Apr 14, 2022

DaviDevMod commented Apr 20, 2022 • edited Loading

DaviDevMod commented Apr 20, 2022

sickdyd commented Jun 6, 2022 • edited Loading

jakebanks commented Jun 23, 2022

valdemarrolfsen commented Jul 29, 2022

harpreetkhalsagtbit commented Apr 26, 2023 • edited Loading

Sassar88 commented Jul 19, 2023

andy9775 commented Nov 17, 2018 •

edited

Loading

corysimmons commented Jun 28, 2019 •

edited

Loading

dcecile commented Jul 5, 2019 •

edited

Loading

blkc commented Feb 19, 2020 •

edited

Loading

jerrygreen commented Mar 5, 2020 •

edited

Loading

L0rdH4x0r commented May 11, 2021 •

edited

Loading

eric-burel commented May 11, 2021 •

edited

Loading

gjolund commented May 11, 2021 •

edited

Loading

DaviDevMod commented Apr 20, 2022 •

edited

Loading

sickdyd commented Jun 6, 2022 •

edited

Loading

harpreetkhalsagtbit commented Apr 26, 2023 •

edited

Loading