汇总错误：导入 Material-UI 组件时无法从 @babel/runtime 加载模块

Question

我正在尝试index.js使用汇总编译此文件：

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";

ReactDOM.render(
    <React.StrictMode>
        <Grid container>
        </Grid>
    </React.StrictMode>,
    document.getElementById('root')
);

rollup.config.js：

import { nodeResolve } from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: 'index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [
        nodeResolve(),
        babel({ babelHelpers: 'bundled', exclude: /node_modules/ }),
        commonjs(),
    ],
};

babel.config.json：

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

现在，当我运行时，出现npx rollup -c此错误：

[!] 错误：无法加载 /home/recursive-beast/Desktop/repositories/myproject/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties（由 node_modules/@material-ui/core/esm/Grid/Grid 导入.js): ENOENT: 没有那个文件或目录，打开'/home/recursive-beast/Desktop/repositories/myproject/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties'

这是出乎意料的，因为它@babel/runtime是 的依赖项@material-ui/core，我已经检查过它是否安装在 node_modules 文件夹中。

从昨天开始，我一直试图找出解决方案，但没有成功，那么问题的根源是什么？

Answer 1

我们也有同样的问题，经过几天的研究，我们通过设置如下解决了这个 jail: '/A_PATH_THAT_DOESNT_EXIST'问题nodeResolve。

nodeResolve({
  // Lock the module search in this path (like a chroot). Module defined
  // outside this path will be marked as external
  jail: '/A_PATH_THAT_DOESNT_EXIST', // Default: '/'
})