Rollup Error: 'default' is not exported by node_modules/react/index.js

Question

我有一个使用 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.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8746:23)
    at CallExpression.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 页面并没有真正帮助，因为我在配置中使用了所有命名导出。

Answer 1

终于找到问题所在了。我需要 @rollup/plugin-replace 插件来替换 process.env.NODE_ENV

这是工作代码

它还需要一些更多的 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;

Answer 2

从最新的 @rollup/plugin-commonjs 版本开始，默认处理 namedExports。

也尝试使用这个 rollup babel 配置，需要安装 @babel/preset-react 模块

     babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
        babelHelpers: "bundled",
      }),

自问题发布之日起，大多数汇总插件都已命名空间，因此请尝试重新安装 @rollup/plugin-babel

Rollup Error: 'default' is not exported by node_modules/react/index.js

Rollup Error: 'default' is not exported by node_modules/react/index.js

javascript

commonjs

ecmascript-6

reactjs

rollupjs

我的rollup.conf.js

我遇到错误但不知道如何解决

这是工作代码