Repository navigation
BrowserslistError: [BABEL] Unknown version 113 of chrome (While processing: "base$0$0") #25165
Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
v15
Description
My build fails with this error whenever I try to serve after updating to v16.
I tried deleting my old browserlists file (created automatically, I don't use it), but it made no difference.
I don't know how to debug this.
Minimal Reproduction
Clone https://github.com/stephenfluin/baby-log
Update to v16
ng serve (with or without the .browserlistrc file)
See the error
Exception or Error
$ ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
styles.js | styles | 321.94 kB |
polyfills.js | polyfills | 11.25 kB |
vendor.js | vendor | 11.12 kB |
main.js | main | 5.52 kB |
runtime.js | runtime | 4.97 kB |
| Initial Total | 354.80 kB
Build at: 2023-05-08T14:09:37.511Z - Hash: c5f80c20654d5c94 - Time: 3456ms
./src/main.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/src/main.ts: Unknown version 113 of chrome (While processing: "base$0$0")
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/src/polyfills.ts: Unknown version 113 of chrome (While processing: "base$0$0")
./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/css-loader/dist/runtime/api.js: Unknown version 113 of chrome (While processing: "base$0$0")
./node_modules/css-loader/dist/runtime/sourceMaps.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/css-loader/dist/runtime/sourceMaps.js: Unknown version 113 of chrome (While processing: "base$0$0")
./node_modules/webpack-dev-server/client/index.js?protocol=auto%3A&username=&password=&hostname=0.0.0.0&port=0&pathname=%2Fng-cli-ws&logging=info&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=false&live-reload=true - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/webpack-dev-server/client/index.js: Unknown version 113 of chrome (While processing: "base$0$0")
./node_modules/@angular/material/prebuilt-themes/indigo-pink.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/css-loader/dist/runtime/sourceMaps.js: Unknown version 113 of chrome (While processing: "base$0$0")
./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/css-loader/dist/runtime/sourceMaps.js: Unknown version 113 of chrome (While processing: "base$0$0")
./node_modules/@angular/common/locales/global/en.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] /home/stephen/workspace/stephenfluin/baby-log/node_modules/@angular/common/locales/global/en.js: Unknown version 113 of chrome (While processing: "base$0$0")
Your Environment
Angular CLI: 16.0.0
Node: 16.14.2
Package Manager: yarn 1.22.19
OS: linux x64
Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.0
@angular-devkit/build-angular 16.0.0
@angular-devkit/core 16.0.0
@angular-devkit/schematics 14.2.9
@angular/fire 7.4.1
@schematics/angular 16.0.0
rxjs 6.6.0
typescript 5.0.4
Anything else relevant?
No response
Activity
alan-agius4 commentedon May 8, 2023
Please remove the
yarn.lockfile and do a freshyarn install.StephenFluin commentedon May 8, 2023
That worked! I'm all set.
Any idea how it got corrupted?
alan-agius4 commentedon May 8, 2023
In some cases, yarn does not delete old stale modules from
node_moduleswhich causes incorrect module resolution.yjaaidi commentedon May 13, 2023
@alan-agius4 this seems to be a common issue. Cf. #24837
The Problem
From my understanding, here is what seems to happen:
@babel/*depends onbrowserslist@^4.21.3which might resolve to4.21.3,4.21.4, or4.21.5@angular-devkit/build-angulardepends onbrowserslist@4.21.5.If
@babel/*'sbrowserslistwas previously resolved to4.21.3or4.21.4, yarn will keep using that version for babel while providing4.21.5to@angular-devkit/build-angularwhich means that@angular-devkit/build-angularand@babel/*end up using different versions ofbrowserslist.As
@angular-devkit/build-angularseems to rely on the fact that@babel/*is using the same version ofbrowserslist, we have to make sure that they do.IMO, it would be safer if
@angular-devkit/build-angularwould use the same version range ofbrowserslistas@babel/*(i.e.^4.21.3) if possible.Workarounds
yarn dedupeyarn dedupewill solve the issue while being faster and less aggressive thanrm yarn.lockas it will only bump what's interesting to bump in order to dedupe deps that can resolve to the same version.Yarn resolutions
Another workaround is to make the CLI add and update
browserslistentry inpackage.json#resolutionsin order to force the version all over the workspace.(Not my favorite but maybe worth mentioning)
Update docs or Schematic
Meanwhile we get a proper way to solve this dependency issue, what about adding
yarn dedupeto the checklist on https://update.angular.io and maybe an "Are you using Yarn?" question.Or maybe we could just add
yarn dedupeto the update schematic.New issue?
Should I open an issue instead or can we just reopen this one?
Thanks @edbzn @JeanMeche and @StephenFluin for raising this! As it's probably a less anecdotic issue than we might think.
build: 📦 fix build
angular-automatic-lock-bot commentedon Jun 13, 2023
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.