I'm developing a React library for my common used components. In my root folder where there is: my rollup config and my src/ folder containing my library. When it's build, the bundle files (ES, CJS and UMD) are in the dist/ folder. my workspace: a simple parcel bundled app where there is an independent package.json. In this package.json, myLib is

Link react versions between linked library and workspace application

I’m developing a React library for my common used components. In my root folder where there is:

my rollup config and my src/ folder containing my library. When it’s build, the bundle files (ES, CJS and UMD) are in the dist/ folder.
my workspace: a simple parcel bundled app where there is an independent package.json. In this package.json, myLib is in dependencies and I linked it.

When I want to use myLib in the workspace I import it like this: import { Button } from 'myLib'.

Here, everything seems to be okay. But in a component I’m using a hook and I have this error:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

JavaScript
​x
 
Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
​

It seems there’s two copies of React, npm ls react returns:

└─┬ myLib@1.0.0 invalid
  └── react@16.8.6  extraneous

JavaScript
 
└─┬ myLib@1.0.0 invalid
  └── react@16.8.6  extraneous
​

I tried to link react and react-dom between myLib/ and workspace/ node_modules but it never works and this error is still here.

TLDR;

Here’s my file tree:

myLib
│   package.json
│   rollup.config.js
│
└───dist/
│
└───src/
│   │   **
│
└───workspace
│   │   package.json
│   │   index.js

JavaScript
 
myLib
│   package.json
│   rollup.config.js
│
└───dist/
│
└───src/
│   │   **
│
└───workspace
│   │   package.json
│   │   index.js
​

To link myLib to workspace: I go to myLib/ and I do yarn link then I go to workspace/ and I do yarn link myLib

react and react-dom are peerDependencies in myLiband devDependencies in workspace/

Oh course I already looked here:

Answer

The solution for this issue is actually explained in the react doc:

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

Another solution is to use lerna (with hoisting).

Advertisement

Answer