javascript - 汇总错误:node_modules/react/index.js 未导出“默认”
问题描述
我有一个项目,我使用 webpack 并想切换到 rollup.js,但我在插件 @rollup/plugin-commonjs 方面遇到了麻烦。
我的 rollup.conf.js
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)
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module页面并没有真正的帮助,因为我已经在我的配置中使用了所有命名的导出。
解决方案
最后我发现了问题所在。我需要@rollup/plugin-replace
插件来替换process.env.NODE_ENV
这是工作代码
它还需要更多的命名出口。
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;
推荐阅读
- flutter - 如何使此页面在所有屏幕上都响应?
- c# - 返回一个包含每个内部数组元素数量的整数数组c#
- python - 仅使用 numpy 的 Python 中的神经网络
- python - 如何将我的代码分成不同的线程?
- python - 如何调试导致python中后续异常的堆栈跟踪?
- c++ - Rcpp 项目清理和重建
- ruby - 如何使用带有更多字母的 gsubstitution
- python - 张量流错误。TypeError:张量对象仅在启用急切执行时才可迭代。要迭代此张量,请使用 tf.map_fn
- php - 检查 MySQL 查询是否具有布尔值并显示 ✓ 或 ✖
- pointers - 在汇编中,使用“mov/lea”时是否总是需要指定“DWORD/WORD/BYTE...”?