我正在使用样式化组件构建一个带有ROLLUP的包。
我的Rolup.config.js如下所示:
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
external: [
'react',
'react-proptypes'
],
plugins: [
resolve({
extensions: [ '.js', '.json', '.jsx' ]
}),
commonjs({
include: 'node_modules/**'
}),
babel({
exclude: 'node_modules/**'
})
]
}
我收到了
[!] Error: 'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/styled-components/dist/styled-components.es.js (7:9)
5: import stream from 'stream';
6: import PropTypes from 'prop-types';
7: import { isValidElementType } from 'react-is';
^
8: import hoistStatics from 'hoist-non-react-statics';
检查NODE_MODULES本身REACT-IS是一个常见的模块,因为它也可以 checkout here。
既然它在node_MODULES/**中,那么Common onjs插件不应该处理它吗?
谢谢。
6条答案
按热度按时间azpvetkf1#
我使用
rollup-plugin-commonjs
解决了这个问题并在汇总配置中手动定义导出,如下所示
在这之后,一切都很顺利。
对于信息,我的初始设置是通过https://github.com/transitive-bullshit/react-modern-library-boilerplate完成的
希望它对你有用
fkaflof62#
上面的修复方法对我不起作用。然而,将
styled-components
添加到rollup.config.js
的外部变量和全局变量列表中对我来说很管用。我使用的是与ROLLUP捆绑在一起的打字稿create-react-library cli。
https://github.com/styled-components/styled-components/issues/930
eoigrqb63#
FroestDog发布的解决方案对我很有效,所以+1。
当我尝试从
react
导入钩子时,我立即得到了相同的错误,我可以按照上面的解决方案进行操作在
rollup.config.js
中,但是我想要一个为所有库处理这个问题的解决方案,所以这个问题在将来不会反复出现。所以就这么做了.
为我和后来加入项目的每个人解决了这个问题。
tf7tbtn24#
以下是2022年的最新答案。
我在使用vitejs时遇到了这个错误,它使用ROLLUP进行生产构建/捆绑。
我已经包括了一个汇总和VITE项目的解决方案。
关于旧答案和文档的说明
在互联网上的文件和论坛中,仍然有很多关于
rollup-plugin-commonjs
和namedExports
的旧评论。rollup-plugin-commonjs
是在2019/08/27年rollup-plugin-commonjs
在2019/12/21年重命名为@rollup/plugin-commonjs
,v11.0.0
namedExports
在2020-06-05年度从@rollup/plugin-commonjs@v13.0.0
中删除因此,任何涉及
rollup-plugin-commonjs
或namedExports
的内容都是过时的,与rollup
或@rollup/plugin-commonjs
的当前版本无关。为什么会出现这个错误
这个错误发生在许多Reaction库中,因为它们使用动态
require(...)
语句在开发和生产源文件之间进行选择。我在本例中使用的是
react
,但它在react-dom
和react-is
中的概念相同。当ROLLUP处理这个文件时,它不能确定导出来自另一个文件,所以看起来导出是空的,这就是为什么我们收到类似
'useState' is not exported by 'node_modules/react/index.js'
的错误。解决方案
1.将库设为外部
最简单的解决方案是将这些库标记为
external
,这意味着它们不会包含在包中,也不会被ROLLUP处理。这还可以减小捆绑包的大小,并避免意外地多次捆绑这些库。您需要确保任何外部库在运行时都可以在页面上使用。
2.使用别名手动解析文件
如果确实需要在捆绑包中包含Reaction,请使用此选项。
1.安装@Rolup/plugin-alias
1.在
rollup.config.js
中配置别名。注:
NODE_ENV
环境变量来控制生产/开发版本umd
React文件设置了别名;如果需要指向cjs
版本,则根据需要调整别名路径Vitejs版本
以下是vitejs项目的等效配置:
2ul0zpep5#
我在构建时遇到以下问题:
可以在ROLLUP COMMONJS配置中使用以下代码:
此代码解决了生成项目时发生的Reaction-is导入错误。阅读更多信息的参考:https://github.com/styled-components/styled-components/issues/3256#issuecomment-694144760
zbsbpyhn6#