在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

Answer 1

我终于通过这些步骤解决了这个问题。

运行npm链接里面

<your-library-package>/node_modules/react

还有

运行npm链接里面

<your-library-package>/node_modules/react-dom

然后在 应用程序根目录中运行 npm link react 和 npm link react-dom

并且不要忘记将 React 和 React-dom 作为库中的外部对象保留

// webpack.config.js

const externals = {
    "react": "react",
    "react-dom": "react-dom",
}

module.exports = {
    .
    .
    .

   externals
   }

Answer 2

我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。

这是我的rollup.config.js：

import {uglify} from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'

export default {
    input: "./src/index.js",
    external: ['react', 'react-dom'],
    output: {
        name: 'test-lib',
        format: "cjs",
    },
    plugins: [
        babel({
            exclude: "node_modules/**"
        }),
        uglify(),
    ],
};

和我的package.json：

{
  "name": "test-lib",
  "version": "1.0.0",
  "main": "dist/test-lib.min.js",
  "scripts": {
    "build": "rollup -c -o dist/test-lib.min.js"
  },
  "author": "Behnam Azimi",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "rollup": "^1.21.4",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-uglify": "^6.0.3"
  }
}

经过这些更改，

npm link

在我的ReactJS（Hooks）项目中真正发挥了作用。

请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。

Answer 3

仅在 package.json 的

react

部分（而不是

react-native

）内设置

peerDependencies

和

dependencies

包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用

devDependencies

字段。

Answer 4

我在打字稿反应项目中解决了这个问题。

可能，当使用

npm link

时，请使用主应用程序项目和组件项目中的

react

。

因此，在您的

package.json

中从

react

和/或

dependencies

 中删除 

devDependencies

检查答案：https://stackoverflow.com/a/62807950/5183591

Answer 5

我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。

问题是，当我使用

npm i ../

将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了

react

和

react-dom

作为对等依赖项，示例应用程序现在有两个不同的 React 副本。

从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。