[英]How to solve more than one copy of react in a custom component library
我有兩個項目,第一個是主應用,第二個是自定義組件庫,都在react中。 主應用程序通過npm link
命令使用自定義組件庫。
但是,在主應用程序中使用自定義組件庫中的自定義鈎子違反了鈎子規則,因為有 2 個不同的反應實例。 為了解決這個問題,我將react
和react-dom
移到了自定義組件庫的 package.json 中的peerDependencies
中, peerDependencies
在自定義組件庫的peerDependencies
中添加了以下幾行。
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"
}
}
cd node_modules/react-dom
yarn link
cd ..
cd node_modules/react
yarn link
在本地,您可以為 react 和 react-dom 鏈接應用程序的節點模塊,因此它只使用一個版本。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.