汇总错误：node_modules/react/index.js 未导出“默认”

Question

我有一个项目，我使用 webpack 并想切换到 rollup.js，但我在插件 @rollup/plugin-commonjs 方面遇到了麻烦。我的 rollup.conf.jsimport 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.jshttps://rollupjs.org/guide/en/#error-name-is-not-exported-by-modulesite/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js (3:7)1: 'use strict';2: 3: import React from "react";          ^https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module页面并没有真正的帮助，因为我已经在我的配置中使用了所有命名的导出。

Answer 1

最后我发现了问题所在。我需要@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;

Answer 2

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

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

     babel({

        exclude: "node_modules/**",

        presets: ["@babel/preset-react"],

        babelHelpers: "bundled",

      }),

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