如何在自定义组件库中解决多个react副本

Question

我有两个项目，第一个是主应用程序，第二个是自定义组件库，两者都在react中。主应用程序通过npm link命令使用自定义组件库。

然而，在主应用程序中使用自定义组件库中的自定义钩子违反了钩子规则，因为有2个不同的react实例。为了解决这个问题，我将react和react-dom移到了自定义组件库的package.json中的peerDependencies中，并将以下几行添加到了自定义组件库的webpack.config.js中。

module.exports = {
...
externals: {
        'react': {
            commonjs: 'react',
            commonjs2: 'react'
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom'
        }
    }
...
}

最后，我删除了node_modules，并在自定义组件库中再次运行npm i。但是，我不能构建这个库，它给出了下面的错误构建阶段。

ERROR in ./src/index.tsx 1:0-48 
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'path\to\src'

我在这个配置中遗漏了什么？

注意:我的自定义组件库中仍然有app.tsx和index.tsx。

自定义组件库的webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Not used since this is a component library, not removed for possible future use
const port = process.env.PORT || 3000;
const host = "localhost" || require('os').hostname().toLowerCase()

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, "src", "index.tsx"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].js',
    },
    devtool: 'inline-source-map',
    devServer: { // Not used since this is a component library, not removed for possible future use
        host: host,
        port: port,
        historyApiFallback: true,
        open: true,
        static: path.join(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: ['@svgr/webpack'],
            },
            {
                test: /\.(png|jp(e*)g|svg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        }
                    },
                ]
            },
            {
                test: /\.?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties"]
                    }
                }
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public", "index.html"),
            favicon: path.join(__dirname, "public", "favicon.ico"),
            manifest: path.join(__dirname, "public", "manifest.json"),
            title: 'Development',
        }),
    ],
    externals: {
        'react': {
            commonjs: 'react',
            commonjs2: 'react'
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom'
        }
    }
}

自定义组件库的package.json

{
  "name": "@optimaze-core/common-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.36",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "antd": "^4.16.13",
    "node-sass": "^6.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.0",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.43.4",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Answer 1

cd node_modules/react-dom
yarn link 
cd .. 
cd node_modules/react
yarn link 

在本地，您可以将您的应用程序的节点模块链接到react和react-dom，这样它就只使用一个版本。