CODEWITHSUNDEEP
javascriptreactjsnpmpackage
Job
Job

Reputation: 11

Prevent multiple versions of React (while creating npm package)

I intend to create an npm package (recharts-candlestick). The only dependency my package has is Recharts. I have created the package, used Webpack to build it and tested the package locally using npm link. This works when I do NOT use Recharts, but as soon as I have Recharts as a peer dependency I get an error message (https://reactjs.org/docs/error-decoder.html/?invariant=321). I think I am having this issue because I have multiple versions of react:

$ npm ls react
[email protected] C:\path_to_project
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
  ├── [email protected] deduped
  └─┬ [email protected]
    ├─┬ [email protected]
    │ └── [email protected] deduped
    ├─┬ [email protected]
    │ ├─┬ [email protected]
    │ │ └── [email protected] deduped
    │ └── [email protected] deduped
    └── [email protected] deduped

I have tried fixing the duplicate react packages locally by linking the react version in the package to the react package of the project I am testing the package in (https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). I would however suspect that with the current setup there would not be any errors anyway because the other react versions are all deduped. The source code for the package can be found here: https://github.com/jobdenotter/candlestick-chart. The package.json of the package code is:

  "name": "my-package",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "webpack": "^5.72.0"
  },
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "recharts": "^2.1.9"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "webpack-cli": "^4.9.2"
  }
}

Upvotes: 1

Views: 1670

Answers (1)

Amaar Hassan
Amaar Hassan

Reputation: 378

This issue occurs when there is a global react version in place, which then conflicts with the local version of the app

I believe it is answered at length here: https://stackoverflow.com/a/71416403

Upvotes: 0

Related Questions