从 webpack-ed 组件库中排除 React

Question

我正在尝试设置我的项目，以便我可以拥有一个公共库，然后由两个不同的 wep 应用程序使用。所有应用程序都使用 React，我正在努力将第一个网络应用程序的一部分分解到它自己的库中，即公共库。

到目前为止，

• 我创建了两个 npm 包，software/library 和 software/app1。
• library 有 webpack 和 babel 设置。
• 我从software/app1 内部运行npm link ../library。

现在我仍然收到消息：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

似乎 webpack 和 babel 工作正常，因为 app1 可以看到 ../library，但 library 的 React 必须与 app1 的副本冲突。

在 app1 中运行

npm ls react
app1@0.1.0 /software/app1
├─┬ @testing-library/react@11.2.7
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-router-dom@5.3.0
│ ├─┬ react-router@5.2.1
│ │ ├─┬ mini-create-react-context@0.4.1
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-serialize@0.2.0
│ └── react@17.0.2 deduped invalid
├── react@17.0.2 invalid
└─┬ theme@1.0.0 -> /software/theme
  ├─┬ react-dom@16.14.0
  │ └── react@16.14.0 deduped
  └── react@16.14.0

npm ERR! code ELSPROBLEMS
npm ERR! invalid: react@17.0.2 software/app1/node_modules/react

我知道这不可能是 React Hook 问题，因为当 library 是 app1 源的一部分时，它里面的钩子工作正常。

我会发布我的library/package.json 和library/webpack.config.js。

package.json

{
    "babel": {
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
    },
    "type": "module",
    "name": "library",
    "version": "1.0.0",
    "description": "common library",
    "author": "John Smith",
    "main": "./dist/index.js",
    "module": "./dist/index.modern.js",
    "source": "./src/index.js",
    "engines": {
        "node": ">=10"
    },
    "peerDependencies": {
        "react": "^16.14.0",
        "react-dom": "^16.13.1",
        "react-scripts": "^3.4.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.16.0",
        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "cross-env": "^7.0.2",
        "css-loader": "^3.4.2",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.7.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-config-standard-react": "^9.2.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-node": "^11.0.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-standard": "^4.0.1",
        "file-loader": "^4.3.0",
        "gh-pages": "^2.2.0",
        "html-webpack-plugin": "^4.0.0-beta.11",
        "microbundle-crl": "^0.13.10",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.0.4",
        "react": "^16.14.0",
        "react-dom": "^16.13.1",
        "react-scripts": "^3.4.1",
        "style-loader": "^0.23.1",
        "url-loader": "^2.3.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^3.11.0",
        "webpack-node-externals": "^3.0.0"
    },
    "files": [
        "dist"
    ]
}

webpack.config.js

import nodeExternals from 'webpack-node-externals';
import path from 'path';
import fs from 'fs';

const PACKAGE = JSON.parse(fs.readFileSync('./package.json'));
const APPNAME = PACKAGE['name'];

export default {
    // entry:'./src/index.js',
    output:{
    path:path.resolve('dist'),
    // filename:'webpack-' + APPNAME + '.js',
    filename:APPNAME + '.js',
    library:APPNAME
    },

    entry: PACKAGE['source'],
    mode: "development",
    externals:[nodeExternals()],
    module: {
    rules: [
        {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: "babel-loader"
        }
        },
        {
        test: /\.css$/,
        use: [
            "style-loader",
            {
            loader: "css-loader",
            options: {
                modules: true
            }
            }
        ]
        },
        {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
        }
    ]
    }
};

过去一天我一直在解决这个问题，但没有任何解决方案。到目前为止，我已经尝试过：

• 只有库的 React 是 peerDependency 和 devDependency。
• 添加 webpack 外部

这一切似乎都没有什么不同。我认为一开始它不起作用，因为我没有设置 babel，但现在它仍然包含库的 React 并且不起作用。

谢谢。

Answer 1

peerDependencies 和 devDependencies 中都有 React。

从package.json 中的devDependencies 属性中删除React，删除您的node_modules 目录，然后运行npm install。

Answer 2

我最终对我的package.json 进行了核对，并用汇总替换了 webpack。出于某种原因，webpack 只是没有接受排除 React 的指令，我可以找到如何禁用 React 的包含。 webpack 不起作用似乎很奇怪，但我现在实际上在app1 中使用library。这是有效的。

config.babel.js

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
};

rollup.config.js

import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';

const config = [
    {
    input:'src/index.js',
    output:{
        file:'dist/index.esm.js',
        format:'esm',
    },
    external:['react'],
    plugins:[
         postcss({
      plugins: []
         }),
        babel({ exclude:"node_modules/**" }),
    ],
    }
];

export default config;

package.json

{
    "devDependencies": {
        "@babel/cli": "^7.16.0",
        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "postcss": "^8.3.11",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-postcss": "^4.0.1"
    },
    "name": "theme",
    "module": "dist/index.esm.js",
    "files": [
        "dist"
    ],
    "version": "1.0.0",
    "scripts": {
        "build": "rollup -c"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
}

这个答案没有回答问题，但这是我最终开始工作的内容。如果有人知道 webpack 发生了什么以及为什么它不工作，他们也应该发布。