CODEWITHSUNDEEP
javascriptreactjsmaterial-uirollupjs
soufiane yakoubi
soufiane yakoubi

Reputation: 951

Rollup error: could not load a module from @babel/runtime when importing a Material-UI component

I'm trying to compile this index.js file using rollup:

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"
    ]
}

Now, when I run npx rollup -c i get this error:

[!] Error: Could not load /home/recursive-beast/Desktop/repositories/myproject/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties (imported by node_modules/@material-ui/core/esm/Grid/Grid.js): ENOENT: no such file or directory, open '/home/recursive-beast/Desktop/repositories/myproject/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties'

This is unexpected because @babel/runtime is a dependency of @material-ui/core, and I already checked that it is installed in the node_modules folder.

I've been trying to figure out the solution since yesterday without success, so what could be the source of the problem?

Upvotes: 5

Views: 2165

Answers (2)

jay
jay

Reputation: 11

I found a workable solution.

I just add the @rollup/plugin-alias plugin

... //other code
const alias = require('@rollup/plugin-alias');

module.exports = [
  {
    ... // other config
    plugins: [
      alias({
        entries: [
          { find: '@ui/lab', replacement: '@material-ui/lab/esm' },
          { find: '@ui/core', replacement: '@material-ui/core/esm' },
          { find: '@ui/icons', replacement: '@material-ui/icons/esm' },
          { find: /^@babel\/runtime\/helpers\/(.*)$/, replacement: '@babel/runtime/helpers/$1.js' }
        ]
      }),
      ...// other plugins
    ],
  },
]

Use @material-ui in js files

import Alert from '@ui/lab/Alert'

import AppBar from '@ui/core/AppBar'
import Toolbar from '@ui/core/Toolbar'
import Grid from '@ui/core/Grid'
import Paper from '@ui/core/Paper'
import Container from '@ui/core/Container'

import PlayIcon from '@ui/icons/PlayArrow'

import {
  createMuiTheme,
  ThemeProvider,
  makeStyles,
  createStyles
} from '@ui/core/styles'

import red from '@ui/core/colors/red'


... // other code

Above, hope it helps.

Upvotes: 1

Ali Turki
Ali Turki

Reputation: 1475

We had the same, after days of researching we solved it by setting jail: '/A_PATH_THAT_DOESNT_EXIST' to nodeResolve to be like the following.

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: '/'
})

Upvotes: 0

Related Questions