Webpack 5 + babel config bug in Angular 12.0.0 - asyncToGenerator failed to resolve.

[andygup]

Bug Report

Affected Package

Angular 12.0.0

Is this a regression?

Brand new issue for 12.0.0

Description

App works fine with 11.2.5. Simply upgraded from 11.2.5 to 12.0.0 now I'm getting many build errors that say:

node_modules/@babel/runtime/helpers/esm/asyncToGenerator' failed to resolve

Minimal Reproduction

npm i on this repo jsapi-angular-cli.zip and then run ng serve --open and the build will fail with errors. When the app works you'll see a map.

Exception or Error

./node_modules/@arcgis/core/widgets/support/chartUtils.js:1:0-160 - Error: Module not found: Error: Can't resolve '/Users/xyz/web/code/jsapi-resources/esm-samples/jsapi-angular-cli/node_modules/@babel/runtime/helpers/esm/asyncToGenerator' in '/Users/xyz/web/code/jsapi-resources/esm-samples/jsapi-angular-cli/node_modules/@arcgis/core/widgets/support'
Did you mean 'asyncToGenerator.js'?
BREAKING CHANGE: The request '/Users/xyz/web/code/jsapi-resources/esm-samples/jsapi-angular-cli/node_modules/@babel/runtime/helpers/esm/asyncToGenerator' 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.

Your Environment

Angular Version:

12.0.0

Anything else relevant?
No

[buu700]

I'm also running into this now after working through #20786:

./node_modules/comlink/dist/esm/comlink.mjs:1:0-122 - Error: Module not found: Error: Can't resolve '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper' in '/cyph/cyph.app/node_modules/comlink/dist/esm'
Did you mean 'createForOfIteratorHelper.js'?
BREAKING CHANGE: The request '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper' 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/comlink/dist/esm/comlink.mjs:2:0-98 - Error: Module not found: Error: Can't resolve '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/slicedToArray' in '/cyph/cyph.app/node_modules/comlink/dist/esm'
Did you mean 'slicedToArray.js'?
BREAKING CHANGE: The request '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/slicedToArray' 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/comlink/dist/esm/comlink.mjs:3:0-100 - Error: Module not found: Error: Can't resolve '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/defineProperty' in '/cyph/cyph.app/node_modules/comlink/dist/esm'
Did you mean 'defineProperty.js'?
BREAKING CHANGE: The request '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/defineProperty' 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/comlink/dist/esm/comlink.mjs:4:0-90 - Error: Module not found: Error: Can't resolve '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/construct' in '/cyph/cyph.app/node_modules/comlink/dist/esm'
Did you mean 'construct.js'?
BREAKING CHANGE: The request '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/construct' 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/comlink/dist/esm/comlink.mjs:5:0-106 - Error: Module not found: Error: Can't resolve '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/toConsumableArray' in '/cyph/cyph.app/node_modules/comlink/dist/esm'
Did you mean 'toConsumableArray.js'?
BREAKING CHANGE: The request '/cyph/cyph.app/node_modules/@babel/runtime/helpers/esm/toConsumableArray' 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.

Note that node_modules/comlink/dist/esm/comlink.mjs doesn't actually import anything from babel. It looks like the issue is triggered by it using various ES2015+ features.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}