[英]Rollup Error: 'default' is not exported by node_modules/react/index.js
I have a project where I use webpack and want to switch to rollup.js but I have trouble regarding the plugin @rollup/plugin-commonjs.我有一个项目,我使用 webpack 并想切换到 rollup.js,但我对插件 @rollup/plugin-commonjs 有问题。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const config = {
input: 'site/templates/scripts/master.js',
output: [
{
file: 'site/templates/scripts/master.min.js',
format: 'cjs'
}
],
plugins: [
nodePolyfills(),
resolve({
browser: true
}),
commonjs({
include: /node_modules/,
namedExports: {
'react': ["useState", "useEffect"],
'@apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
}
}),
babel({
babelrc: true,
exclude: 'node_modules/**'
}),
terser()
]
};
export default config;
site/templates/scripts/master.js → site/templates/scripts/master.min.js...
[!] Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js (3:7)
1: 'use strict';
2:
3: import React from "react";
^
4:
5: const FredhopperProduct = ({
Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
at error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:10152:30)
at Module.error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14487:16)
at handleMissingExport (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14388:28)
at Module.traceVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14871:24)
at ModuleScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:13448:39)
at FunctionScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
at ChildScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
at MemberExpression.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11285:49)
at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8746:23)
at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11473:15)
The https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module page does not really help, since I have all named exports which I use in my config. https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module页面并没有真正的帮助,因为我已经命名了我在配置中使用的导出。
Finally I found what was wrong.最后我发现了问题所在。 I needed the @rollup/plugin-replace
plugin to replace process.env.NODE_ENV
我需要@rollup/plugin-replace
插件来替换process.env.NODE_ENV
It needed also some more namedExports.它还需要更多的命名出口。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import replace from '@rollup/plugin-replace';
import React from 'react';
import ReactIs from 'react-is';
import ReactDOM from 'react-dom';
const config = {
input: 'site/templates/scripts/master.js',
output: [
{
file: 'site/templates/scripts/master.min.js',
format: 'cjs'
}
],
plugins: [
replace({
"process.env.NODE_ENV": JSON.stringify("development")
}),
nodePolyfills(),
resolve({
browser: true
}),
commonjs({
include: /node_modules/,
namedExports: {
'react-is': Object.keys(ReactIs),
'react': Object.keys(React),
'react-dom': Object.keys(ReactDOM),
'@apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
}
}),
babel({
babelrc: true,
exclude: 'node_modules/**'
}),
terser()
]
};
export default config;
As of the latest @rollup/plugin-commonjs
version, namedExports are handled by default.从最新的@rollup/plugin-commonjs
版本开始,默认处理 namedExports。
Also try using this rollup babel config, requires the @babel/preset-react
module to be installed也可以尝试使用这个 rollup babel 配置,需要安装@babel/preset-react
模块
babel({
exclude: "node_modules/**",
presets: ["@babel/preset-react"],
babelHelpers: "bundled",
}),
And since the date of the issue most rollup plugins have been namespaced so try to reinstall @rollup/plugin-babel
自问题发布之日起,大多数汇总插件都已命名空间,因此请尝试重新安装@rollup/plugin-babel
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.