问题描述
当我尝试在我的主机应用程序中使用本地 React 组件库（与 rollup 捆绑在一起）时，我遇到了可怕的“您可能在同一个应用程序中有多个 React 副本”错误（注意：这只发生在我使用钩子）。如果'react' 和'react-dom' 包含在devDependencies（测试/故事书所必需的）中，似乎几乎不可能不将它捆绑到我的库中，尽管它在我的package.json 中的peerDependencies 和我的externals 中列出rollup.config.js（而且，要明确的是，它不在“依赖项”下）。
我在网上看到许多解决方案建议将库链接到主机应用程序中的 React 副本（无论是通过别名还是直接从主机应用程序的 node_modules 文件夹解析模块），但这对我不起作用，因为该库用于不同的应用程序。它需要捆绑为 peerDependency，在我看来，这不应该是那么困难。我们之前使用 webpack 将库中的代码直接捆绑到这些应用程序中，但认为如果我们将其外部化为单独的模块会更容易维护。
无论如何，这是我的配置。拜托，上帝，告诉我我做错了什么。
节点 v12.16.3 NPM 6.14.4
（包括因为，据我所知，npm@7 会自动捆绑 peerDependencies，但是在生产中更新会很麻烦，而且我认为这对于我正在尝试做的事情没有必要）
rollup.config.js
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import postCssModules from 'postcss-modules';
import svg from 'rollup-plugin-svg-import';
const packageJson = require('./package.json');
export default {
input: 'src/index.js',output: [
{
file: packageJson.main,format: 'cjs',sourcemap: true,exports: 'auto',globals: {
react: 'React','react-dom': 'ReactDOM','styled-components': 'styled'
}
}
],external: ['react','react-dom','styled-component'],plugins: [
peerDepsExternal({
includeDependencies: true
}),babel({
babelHelpers: 'bundled',exclude: ['node_modules/**','public/**'],extensions: ['.js','.jsx'],plugins: [
'@babel/plugin-proposal-object-rest-spread','@babel/plugin-transform-destructuring','babel-plugin-styled-components'
],inputSourceMap: true
}),commonjs({
include: /node_modules/
}),svg(),postcss({
plugins: [
postCssModules({
globalModulePaths: [
/node_modules\/rc-slider\/assets\/index.css/
]
})
]
}),json(),resolve({ preferBuiltins: true,browser: true })
]
};
package.json
{
"name": "MY_PACKAGE","version": "1.0.0","description": "package description","main": "public/index.js","files": [
"public"
],"scripts": {
"unit-tests": "jest --config jest.config.json --testRegex ./.*\\.test\\.js$","unit-tests-watch": "jest --config jest.config.json --watch","generate-docs": "node ./docs_generator/generate.js","storybook": "start-storybook -p 6006 -s stories","storybook-debug": "start-storybook -p 6006 -s stories --debug-webpack","build-storybook": "build-storybook","build": "rollup -c"
},"author": "","license": "ISC","dependencies": {
"axios": "^0.21.1","clone": "^2.1.2","core-js": "^3.6.5","prop-types": "^15.7.2","rc-slider": "^9.3.1","react-toggle": "^4.1.1"
},"peerDependencies": {
"react-dom": "^16.13.1","react-is": "^16.13.1","styled-components": "^5.2.1","react": "^16.13.1"
},"devDependencies": {
"@babel/core": "^7.11.1","@babel/plugin-proposal-object-rest-spread": "^7.11.0","@babel/plugin-transform-destructuring": "^7.10.4","@babel/polyfill": "^7.10.4","@babel/preset-env": "^7.11.0","@babel/preset-react": "^7.10.4","@babel/runtime": "^7.11.2","@rollup/plugin-babel": "^5.2.3","@rollup/plugin-commonjs": "^17.1.0","@rollup/plugin-json": "^4.1.0","@rollup/plugin-node-resolve": "^11.1.1","@storybook/addon-actions": "^6.1.14","@storybook/addon-essentials": "^6.0.16","@storybook/addon-knobs": "^6.0.16","@storybook/addon-links": "^6.0.16","@storybook/addon-options": "^5.3.19","@storybook/addon-storysource": "^6.0.16","@storybook/addons": "^6.0.16","@storybook/preset-scss": "^1.0.2","@storybook/react": "^6.0.16","@storybook/source-loader": "^6.0.16","animejs": "^2.2.0","babel-core": "^7.0.0-bridge.0","babel-jest": "^26.3.0","babel-plugin-styled-components": "^1.11.1","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.3","enzyme-to-json": "^3.5.0","eslint": "^7.7.0","eslint-config-airbnb": "^18.2.0","eslint-plugin-import": "^2.22.0","eslint-plugin-jsx-a11y": "^6.3.1","eslint-plugin-react": "^7.20.6","eslint-plugin-react-hooks": "^4.2.0","jest": "^26.4.0","jest-junit": "^11.1.0","jest-styled-components": "^7.0.3","node-sass": "^4.14.1","postcss": "^8.2.5","postcss-modules": "^4.0.0","react-docgen": "^5.3.0","react": "^16.13.1","react-dom": "^16.13.1","regenerator-runtime": "^0.13.7","rollup": "^2.38.5","rollup-plugin-peer-deps-external": "^2.2.4","rollup-plugin-postcss": "^4.0.0","rollup-plugin-sourcemaps": "^0.6.3","rollup-plugin-svg-import": "^1.5.1","sass-loader": "10.1.1","typescript": "^4.1.5"
},"private": "true"
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）