Next.js Discord

Discord Forum

Next 14 upgrade browserslist bug

Unanswered
Red-breasted Merganser posted this in #help-forum
Open in Discord
Red-breasted MerganserOP
I've just updated from v13 to v14 and it's pretty close to working, but one snag which I've narrowed down to being a browserslist-related issue.

The error in question is

[1] Error: [BABEL] /Users/robhannay/web/microapps/pages/_app.js: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
[1] - Did you mean 'opera'? (While processing: "/Users/robhannay/web/node_modules/.pnpm/next@14.1.1-canary.70_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/babel.js$0$42")
[1]     at Generator.next (<anonymous>)
[1]     at Generator.next (<anonymous>)
[1]     at Generator.next (<anonymous>)


We're using a babel config still, hence it needs to go through there.

I've ensured there is only one version of helper-compilation-targets in use throughout the project and verified this in our lockfile. Likewise with browserslist itself.

If I remove the > 1% line in our browserslist, it's fine. Ofc this is because Opera Mini is included has > 1% usage. But I can't pin down why two tools that should be working in tandem are producing incompatible browser lists 🤷‍♂️

If I add not OperaMobile all it's fine on our Next.js build, but that then breaks a separate app build (also using babel and a browserslist) with the following error that I'll add to the thread

I'm using current next canary as you can see, and it's still an issue. I search the issues here and on Github and can't find anything. I'm on the latest versions of all babel-related packages

Has anyone else seen or fixed this issue without actually modifying the browsers that they target?

1 Reply

Red-breasted MerganserOP
The 'other' error in question, when building a non-Next app that uses our browserslist is


[1] /Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:1168
[1]         throw unknownQuery(node.query)
[1]         ^
[1] Error [BrowserslistError]: Unknown browser query `not OperaMobile all`. Maybe you are using old Browserslist or made typo in query.
[1]     at unknownQuery (/Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:279:10)
[1]     at Function.select (/Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:1168:15)
[1]     at /Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:328:29
[1]     at Array.reduce (<anonymous>)
[1]     at resolve (/Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:318:34)
[1]     at browserslist (/Users/robhannay/web/node_modules/.pnpm/browserslist@4.22.2/node_modules/browserslist/index.js:420:21)
[1]     at Object.load (/Users/robhannay/web/node_modules/.pnpm/webpack@5.90.3_@swc+core@1.3.93_esbuild@0.20.1/node_modules/webpack/lib/config/browserslistTargetHandler.js:70:9)
[1]     at getDefaultTarget (/Users/robhannay/web/node_modules/.pnpm/webpack@5.90.3_@swc+core@1.3.93_esbuild@0.20.1/node_modules/webpack/lib/config/target.js:19:50)
[1]     at /Users/robhannay/web/node_modules/.pnpm/webpack@5.90.3_@swc+core@1.3.93_esbuild@0.20.1/node_modules/webpack/lib/config/defaults.js:155:10
[1]     at F (/Users/robhannay/web/node_modules/.pnpm/webpack@5.90.3_@swc+core@1.3.93_esbuild@0.20.1/node_modules/webpack/lib/config/defaults.js:96:15) {
[1]   browserslist: true
[1] }