Build breaks on Webpack 5 #23290

EliasJorgensen · 2020-10-28T10:00:04Z

Build breaks on Webpack 5 due to babel-runtime imports not following ESM Strict mode requirements.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Build fails with the following errors:

> yarn build
yarn build
yarn run v1.22.5
$ cross-env NODE_ENV=production webpack --config=config/webpack.config.js
[webpack-cli] Compilation finished
assets by status 580 KiB [cached] 3 assets
orphan modules 782 KiB [orphan] 201 modules
runtime modules 6.08 KiB 10 modules
modules by path ./node_modules/@material-ui/ 1.22 MiB 202 modules
modules by path ./node_modules/@babel/runtime/helpers/ 7.4 KiB 19 modules
modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules
modules by path ./src/ 79.5 KiB 2 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/react-is/ 2.69 KiB 2 modules
modules by path ./node_modules/react-transition-group/esm/ 18.2 KiB
  ./node_modules/react-transition-group/esm/Transition.js + 1 modules 18.1 KiB [built] [code generated]
  ./node_modules/react-transition-group/esm/TransitionGroupContext.js 68 bytes [built] [code generated]
9 modules

ERROR in ./node_modules/@babel/runtime/helpers/esm/inherits.js 1:0-46
Module not found: Error: Can't resolve './setPrototypeOf' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'setPrototypeOf.js'?
BREAKING CHANGE: The request './setPrototypeOf' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/RootRef/RootRef.js 3:0-60 50:2-11
 @ ./node_modules/@material-ui/core/esm/RootRef/index.js 1:0-36 1:0-36
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js 1:0-74
Module not found: Error: Can't resolve './objectWithoutPropertiesLoose' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'objectWithoutPropertiesLoose.js'?
BREAKING CHANGE: The request './objectWithoutPropertiesLoose' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/Typography/Typography.js 2:0-90 172:14-38
 @ ./node_modules/@material-ui/core/esm/Typography/index.js 1:0-39 1:0-39
 @ ./src/pages/Login/Login.js 4:0-54 39:38-48 42:59-69
 @ ./src/App.js 6:0-40 17:15-20
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js 1:0-47
Module not found: Error: Can't resolve '../../helpers/esm/typeof' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'typeof.js'?
BREAKING CHANGE: The request '../../helpers/esm/typeof' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/RootRef/RootRef.js 4:0-94 7:379-405
 @ ./node_modules/@material-ui/core/esm/RootRef/index.js 1:0-36 1:0-36
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js 2:0-60
Module not found: Error: Can't resolve './assertThisInitialized' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'assertThisInitialized.js'?
BREAKING CHANGE: The request './assertThisInitialized' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/RootRef/RootRef.js 4:0-94 7:379-405
 @ ./node_modules/@material-ui/core/esm/RootRef/index.js 1:0-36 1:0-36
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js 1:0-46
Module not found: Error: Can't resolve './arrayWithHoles' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'arrayWithHoles.js'?
BREAKING CHANGE: The request './arrayWithHoles' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/Zoom/Zoom.js 2:0-70 57:20-34
 @ ./node_modules/@material-ui/core/esm/Zoom/index.js 1:0-33 1:0-33
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js 2:0-58
Module not found: Error: Can't resolve './iterableToArrayLimit' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'iterableToArrayLimit.js'?
BREAKING CHANGE: The request './iterableToArrayLimit' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/Zoom/Zoom.js 2:0-70 57:20-34
 @ ./node_modules/@material-ui/core/esm/Zoom/index.js 1:0-33 1:0-33
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js 3:0-48
Module not found: Error: Can't resolve './nonIterableRest' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableRest.js'?
BREAKING CHANGE: The request './nonIterableRest' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/Zoom/Zoom.js 2:0-70 57:20-34
 @ ./node_modules/@material-ui/core/esm/Zoom/index.js 1:0-33 1:0-33
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toArray.js 1:0-46
Module not found: Error: Can't resolve './arrayWithHoles' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'arrayWithHoles.js'?
BREAKING CHANGE: The request './arrayWithHoles' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/ExpansionPanel.js 2:0-58 138:31-39
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/index.js 1:0-43 1:0-43
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toArray.js 2:0-48
Module not found: Error: Can't resolve './iterableToArray' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'iterableToArray.js'?
BREAKING CHANGE: The request './iterableToArray' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/ExpansionPanel.js 2:0-58 138:31-39
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/index.js 1:0-43 1:0-43
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toArray.js 3:0-48
Module not found: Error: Can't resolve './nonIterableRest' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableRest.js'?
BREAKING CHANGE: The request './nonIterableRest' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/ExpansionPanel.js 2:0-58 138:31-39
 @ ./node_modules/@material-ui/core/esm/ExpansionPanel/index.js 1:0-43 1:0-43
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 1:0-52
Module not found: Error: Can't resolve './arrayWithoutHoles' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'arrayWithoutHoles.js'?
BREAKING CHANGE: The request './arrayWithoutHoles' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/GridListTile/GridListTile.js 3:0-78 51:72-90 53:71-89 57:74-92 59:71-89
 @ ./node_modules/@material-ui/core/esm/GridListTile/index.js 1:0-41 1:0-41
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 2:0-48
Module not found: Error: Can't resolve './iterableToArray' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'iterableToArray.js'?
BREAKING CHANGE: The request './iterableToArray' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/GridListTile/GridListTile.js 3:0-78 51:72-90 53:71-89 57:74-92 59:71-89
 @ ./node_modules/@material-ui/core/esm/GridListTile/index.js 1:0-41 1:0-41
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

ERROR in ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 3:0-52
Module not found: Error: Can't resolve './nonIterableSpread' in '/home/elias/dev/acto/react-template/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableSpread.js'?
BREAKING CHANGE: The request './nonIterableSpread' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@material-ui/core/esm/GridListTile/GridListTile.js 3:0-78 51:72-90 53:71-89 57:74-92 59:71-89
 @ ./node_modules/@material-ui/core/esm/GridListTile/index.js 1:0-41 1:0-41
 @ ./node_modules/@material-ui/core/index.js
 @ ./src/pages/LoginError.js 4:0-59 5:18-28 23:42-46
 @ ./src/App.js 8:0-44 25:15-25
 @ ./src/index.js 3:0-24 9:7-10

webpack 5.3.0 compiled with 13 errors in 7265 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected Behavior 🤔

Build finishes without errors.

Steps to Reproduce 🕹

Setup a React project with MUI and Webpack 5
Build project
💥

Context 🔦

Migration from Webpack 4 -> 5, which imposes stricter requirements for package modules.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v17.0.1 (also happens with newest v16 release)
Browser	N/A
TypeScript	N/A
Webpack	5.3.0

The text was updated successfully, but these errors were encountered:

EliasJorgensen · 2020-10-28T10:03:40Z

Should be fixed by updating babel-runtime to 7.12.0 or newer, as noted here: https://babeljs.io/blog/2020/10/15/7.12.0

eps1lon · 2020-10-28T10:04:28Z

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

EliasJorgensen · 2020-10-28T10:05:39Z

@eps1lon Afaik codesandbox does not support custom webpack configs. I'll create a quick repo showcasing the issue.

eps1lon · 2020-10-28T10:07:38Z

I'll create a quick repo showcasing the issue.

That's fine. That is a saved reply that mentions that codesandbox is not necessary. GitHub repo works just as well.

EliasJorgensen · 2020-10-28T10:34:22Z

I'm gonna close the issue. After creating the example where it oddly worked just fine, i came to the conclusion that it had to be the yarn.lock file, as all else was identical. I deleted it, reinstalled my deps, and profit.

eps1lon · 2020-10-28T10:44:59Z

I deleted it, reinstalled my deps, and profit.

If I recall correctly, some versions of babel/runtime are just not compatible with webpack 5. We're probably bumping our version to the latest in v5 but for v4 I rather not mess with babel/runtime.

seloElo · 2020-11-16T15:56:45Z

Still not working for me today, having the same issues as described. Does that mean we will have to wait for V5 to work with the latest babel version??

EliasJorgensen · 2020-11-17T12:36:22Z

@anthonyferreol Try deleting your lock file and reinstall your projects dependencies. It did the trick for me, for some reason.

heath-freenome · 2020-11-17T23:19:29Z

I tried the package-lock.json delete and it didn't help. I can't upgrade to webpack 5 because of this... PLEASE FIX. I can't believe we have to wait for V5 in order to be able to use the latest webpack. What is the ETA on material-ui@v5?

seloElo · 2020-11-17T23:32:18Z

@EliasJorgensen I tried before posting, it is not working

Until the version of Babel runtime is not bumped in material-ui, I'm doomed with my up to date tech stack 😥

EliasJorgensen · 2020-11-18T09:52:43Z

@anthonyferreol Sorry to hear that. It worked for me.

devhyunjae · 2020-11-19T02:22:03Z

@EliasJorgensen

Try deleting your lock file and reinstall your projects dependencies. It did the trick for me, for some reason.

This worked for me Thanks!

Krasnopir · 2020-11-27T15:11:46Z

have this problem too.
webpack 5.8.0
react 17.0.1
typescript 4.1.2

@material-ui/core 5.0.0-alpha.17
@material-ui/styled-engine 5.0.0-alpha.16

ERROR in ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js

Module not found: Error: Can't resolve './arrayWithoutHoles' in '/usr/src/app/node_modules/@babel/runtime/helpers/esm'
...
Module not found: Error: Can't resolve './iterableToArray' in '/usr/src/app/node_modules/@babel/runtime/helpers/esm'
...
Module not found: Error: Can't resolve './unsupportedIterableToArray' in '/usr/src/app/node_modules/@babel/runtime/helpers/esm'
...
Module not found: Error: Can't resolve './nonIterableSpread' in '/usr/src/app/node_modules/@babel/runtime/helpers/esm'
...
@ ./node_modules/css-vendor/dist/css-vendor.esm.js 2:0-78 408:18-36
@ ./node_modules/jss-plugin-vendor-prefixer/dist/jss-plugin-vendor-prefixer.esm.js 1:0-83 14:18-36 28:26-43 31:29-43 49:11-25
@ ./node_modules/@material-ui/styles/jssPreset/jssPreset.js 6:0-56 14:43-57
@ ./node_modules/@material-ui/styles/jssPreset/index.js 1:0-38 1:0-38
@ ./node_modules/@material-ui/styles/index.js 26:0-51 26:0-51 27:0-28 27:0-28
@ ./node_modules/@material-ui/core/styles/index.js 17:0-126 17:0-126 17:0-126 17:0-126 17:0-126 17:0-126

tried to delete lock file and install packages - the same errors

adriangodong · 2021-01-02T08:36:15Z

I'm getting the same error after upgrading to Webpack 5. The fix is to upgrade @babel/runtime used by MUI to 7.12+ #23290 (comment). To do this, simply reinstall MUI npm install @material-ui/core -- you can add your current exact version if you don't want to upgrade MUI.

gnarr · 2021-01-26T12:47:36Z

@EliasJorgensen

Try deleting your lock file and reinstall your projects dependencies. It did the trick for me, for some reason.

Thanks, this worked for me! Although I had to delete the .next folder and node_modules also
👍

mribichich · 2022-12-01T14:41:57Z

just for those coming back here because of the same problem.

I'm also using MUI v4 and wanted to upgrade to react-scripts v5.

I fixed it by setting the resolution of @babel/runtime in package.json.

tested it from: 7.12 to 7.18 and it worked just fine. which is crazy. cos now I cant make it fail. It seems that once you have set a resolution, even if you remove it, the yarn.lock file puts every other version other the last one used.

steps:

add this to :

  "resolutions": {
    "@babel/runtime": "7.18"
  }

then exec yarn

EliasJorgensen added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 28, 2020

eps1lon added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 28, 2020

EliasJorgensen closed this as completed Oct 28, 2020

Krasnopir mentioned this issue Nov 27, 2020

webpack 5. ERROR @material-ui/styles #23744

Closed

bebraw mentioned this issue Feb 17, 2022

react-scripts build fails with Module not found: Error: Can't resolve '../../helpers/esm/typeof' facebook/create-react-app#12008

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build breaks on Webpack 5 #23290

Build breaks on Webpack 5 #23290

EliasJorgensen commented Oct 28, 2020

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

seloElo commented Nov 16, 2020

EliasJorgensen commented Nov 17, 2020

heath-freenome commented Nov 17, 2020 •

edited

Loading

seloElo commented Nov 17, 2020 •

edited

Loading

EliasJorgensen commented Nov 18, 2020

devhyunjae commented Nov 19, 2020 •

edited

Loading

Krasnopir commented Nov 27, 2020 •

edited

Loading

adriangodong commented Jan 2, 2021

gnarr commented Jan 26, 2021

mribichich commented Dec 1, 2022

Build breaks on Webpack 5 #23290

Build breaks on Webpack 5 #23290

Comments

EliasJorgensen commented Oct 28, 2020

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

EliasJorgensen commented Oct 28, 2020

eps1lon commented Oct 28, 2020

seloElo commented Nov 16, 2020

EliasJorgensen commented Nov 17, 2020

heath-freenome commented Nov 17, 2020 • edited Loading

seloElo commented Nov 17, 2020 • edited Loading

EliasJorgensen commented Nov 18, 2020

devhyunjae commented Nov 19, 2020 • edited Loading

Krasnopir commented Nov 27, 2020 • edited Loading

adriangodong commented Jan 2, 2021

gnarr commented Jan 26, 2021

mribichich commented Dec 1, 2022

heath-freenome commented Nov 17, 2020 •

edited

Loading

seloElo commented Nov 17, 2020 •

edited

Loading

devhyunjae commented Nov 19, 2020 •

edited

Loading

Krasnopir commented Nov 27, 2020 •

edited

Loading