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

Question

我有一个像这样的简单组件。

import React, {useState} from 'react';

function MyComponentWithState(props) {
    const [value, setValue] = useState(0);

    return (
        <p>My value is: {value}</p>
    ) 
}

export default MyComponentWithState;

我想将它作为一个单独的包发布到 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。

package.json:

{
  "name": "try-to-publish",
  "version": "0.0.1",
  "description": "Just a test",
  "main": "build/index.js",
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack"
  },
  "author": {
    "name": "Behnam Azimi"
  },
  "license": "ISC",
  "peerDependencies": {
    "react": "16.9.0",
    "react-dom": "16.9.0"
  },
  "dependencies": {
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "prop-types": "15.7.2",
    "react-scripts": "3.1.1",
    "webpack": "4.39.3"
  },
  "devDependencies": {
    "@babel/core": "7.6.0",
    "@babel/plugin-proposal-class-properties": "7.5.5",
    "@babel/preset-env": "7.6.0",
    "@babel/preset-react": "7.0.0",
    "babel-loader": "8.0.6",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-plugin-transform-react-jsx": "6.24.1",
    "css-loader": "3.2.0",
    "node-sass": "4.12.0",
    "sass-loader": "8.0.0",
    "style-loader": "1.0.0",
    "webpack-cli": "3.3.8",
    "webpack-external-react": "^1.1.2"
  }
}

webpack.config.json:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                use: {
                    loader: "babel-loader"
                }
            },
        ]
    },
    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
        }
    },
    externals: {
        'react': "commonjs react",
        'react-dom': "commonjs react-dom"
    },
};

这是我的 .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

当我将我的组件发布到 NPM 并使用 `npm install 将它安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样工作，但我的观点是本地测试!

我想在发布前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主要 ReactJS 项目链接起来。

正如您在上面看到的，我的组件是功能性的，我也使用了钩子(Hook)。因此，当我将本地链接库注入(inject)到我的主要 ReactJs 项目时，会遇到此错误，

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

我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也将导入 React!我的意思是在一个项目中导入两次 React!。

我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。

我应该怎么做才能解决这个问题？我的错误在哪里？

更新:我也尝试了@sung-m-kim 和@eddie-cooro 所说的，但没有用!意思是，我更改了 package.json 并从 dependencies 中删除了 react 和 react-dom 并将它们添加到 devDpendencies .

Answer 1

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

在里面运行npm link

<your-library-package>/node_modules/react

还有

在里面运行npm link

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