How to handle duplicate packages from NPM package?

I have an NPM package I am working on which has a dependency of react. I then have a test app which has react installed as a dependency. When I import my npm package into the test app, I get the following error:

Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following

  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

Running npm ls react in my test app suggests I might have a duplicate of react:

<a href="" class="__cf_email__" data-cfemail="36425345421b574646760618071806">[email protected]</a> 
├─┬ @package-name/<a href="" class="__cf_email__" data-cfemail="c3b1a6a2a0b783f2edf3edf3">[email protected]</a> -> ./../package-name-react
│ ├─┬ <a href="" class="__cf_email__" data-cfemail="4032252123346d242f2d0071776e706e72">[email protected]</a>
│ │ └── <a href="" class="__cf_email__" data-cfemail="4d3f282c2e390d7c7a637d637f">[email protected]</a> deduped
│ └── <a href="" class="__cf_email__" data-cfemail="2456414547506415130a140a16">[email protected]</a> // <----------------
├─┬ <a href="" class="__cf_email__" data-cfemail="7f111a070b3f4e4d514e514f">[email protected]</a>
│ ├── <a href="" class="__cf_email__" data-cfemail="b3c1d6d2d0c7f382849d839d81">[email protected]</a> deduped
│ ├─┬ <a href="" class="__cf_email__" data-cfemail="0a797e73666f6e276079724a">[email protected]</a>5.0.0
│ │ └── <a href="" class="__cf_email__" data-cfemail="cbb9aeaaa8bf8bfafce5fbe5f9">[email protected]</a> deduped
│ └─┬ <a href="" class="__cf_email__" data-cfemail="106563753d636572637362796064797f7e50213e253e21">[email protected]</a>
│   └── <a href="" class="__cf_email__" data-cfemail="36445357554276070118061804">[email protected]</a> deduped
├─┬ <a href="" class="__cf_email__" data-cfemail="91e3f4f0f2e5bcf5fefcd1a0a6bfa1bfa3">[email protected]</a>
│ └── <a href="" class="__cf_email__" data-cfemail="92e0f7f3f1e6d2a3a5bca2bca0">[email protected]</a> deduped
└── <a href="" class="__cf_email__" data-cfemail="7103141012053140465f415f43">[email protected]</a> // <----------------

My package.json for my npm package looks like this:

  "name": "@package-name/react",
  "version": "1.0.0",
  "description": "",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
  "types": "dist/index.d.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "clean": "rimraf dist",
    "build": "npm run clean && rollup -c"
  "devDependencies": {
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@rollup/plugin-typescript": "^8.2.5",
    "rimraf": "^3.0.2",
    "rollup": "^2.56.2",
    "rollup-plugin-dts": "^3.0.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^4.3.5"
  "dependencies": {
    "": "^4.4.1"
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"

When I remove react and react-dom from peerDependencies, the error goes away but causes other issues. It’s almost like peerDependencies are being installed and rolled up in my package.

My component in my package is very simple at this stage and is like so:

const MyComponent  = ({ 
}) => {
  const [myValue, setValue] = useState(false);

  useEffect(() => {
  }, []);

  return (

I am then consuming this package in my test app like so:

import { MyComponent } from "package-name/react";

const MyApp = () => {
    <div>Hello world</div>

Rollup config:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';

const packageJson = require('./package.json');

export default [
        input: 'src/index.ts',
        output: [
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
                name: 'react-ts-lib'
                file: packageJson.module,
                format: 'esm',
                sourcemap: true
        plugins: [
            typescript({ tsconfig: './tsconfig.json' }),
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: "esm" }],
        external: [/.css$/],
        plugins: [dts()],


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It was not clear from the question description, but looking at the repo, I see that the package is installed locally.

"dependencies": {
  "next": "12.1.0",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-ts-lib": "file:../react-ts-lib"

Which means that the lib code still resolves react using its own node_modules (installed locally) rather than the app dependencies.

One way to fix this issue could be to setup the lib project with something like create-react-library, which addresses this problem explicitly:

If you use react-hooks in your project, when you debug your example
you may run into an exception Invalid Hook Call Warning. This issue
explains the reason, your lib and example use a different instance,
one solution is rewrite the react path in your example [app] package.json
to 'file:../node_modules/react' or 'link:../node_modules/react'.

Note that in your case, you could simply change the path of react in the lib’s devDependencies to point to the app’s react:

  "devDependencies": {
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@rollup/plugin-typescript": "^8.2.5",
    "@types/react": "^17.0.18",
    "react": "file:../my-app/node_modules/react",

Or the other way around, depending on what makes the most sense.

There are also other ways to do local development of a React library:

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x