Fail to run web dev server after upgrading to 16.5 (React) #18161

elizww · 2023-07-18T14:17:33Z

Current Behavior

web dev server not working after updating to NX 16.5.2 (or 16.5.0)

I see this error message while building:
ERROR in ./src/polyfills.ts
Module build failed (from ../../node_modules/@nx/webpack/src/utils/web-babel-loader.js):
Error: [BABEL] E:\github\nx-ui-ligo\apps\risk\src\polyfills.ts: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target

Did you mean 'opera'? (While processing: "E:\github\nx-ui-ligo\node_modules\@babel\preset-env\lib\index.js$28")

and a blank page with this:
Cannot GET /

Expected Behavior

dev server working

GitHub Repo

No response

Steps to Reproduce

update a react app to nx 16.5.x
run the dev server

Nx Report

Node   : 16.19.0
   OS     : win32-x64
   yarn   : 1.22.19

   nx (global)        : 16.4.2
   nx                 : 16.5.2
   @nx/js             : 16.5.2
   @nx/jest           : 16.5.2
   @nx/linter         : 16.5.2
   @nx/workspace      : 16.5.2
   @nx/cypress        : 16.5.2
   @nx/devkit         : 16.5.2
   @nx/eslint-plugin  : 16.5.2
   @nx/plugin         : 16.5.2
   @nx/react          : 16.5.2
   @nx/storybook      : 16.5.2
   @nrwl/tao          : 16.5.2
   @nx/web            : 16.5.2
   @nx/webpack        : 16.5.2
   nx-cloud           : 16.1.0
   typescript         : 5.1.3
   ---------------------------------------
   Community plugins:
   @webpro/nx-tsc : 0.0.1
   ---------------------------------------
   Local workspace plugins:
         @ui-ligo/client/config/feature/env
         @ui-ligo/tsconfig
         @ui-ligo/workspace-plugin

Failure Logs

Entrypoint main = runtime.js vendor.js main.js 2 auxiliary assets
Entrypoint polyfills = runtime.js polyfills.js 2 auxiliary assets
Entrypoint styles = runtime.js styles.css styles.js 3 auxiliary assets
chunk (runtime: runtime) main.js (main) 39 bytes [initial] [rendered]
chunk (runtime: runtime) polyfills.js (polyfills) 174 KiB [initial] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 3.34 KiB [entry] [rendered]
chunk (runtime: runtime) styles.css, styles.js (styles) 174 KiB (javascript) 80 bytes (css/mini-extract) [initial] [rendered]
chunk (runtime: runtime) vendor.js (vendor) (id hint: vendor) 174 KiB [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

ERROR in ./src/main.tsx
Module build failed (from ../../node_modules/@nx/webpack/src/utils/web-babel-loader.js):
Error: [BABEL] E:\github\nx-ui-ligo\apps\risk\src\main.tsx: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "E:\\github\\nx-ui-ligo\\node_modules\\@babel\\preset-env\\lib\\index.js$28")
    at validateTargetNames (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-compilation-targets\lib\index.js:71:13)
    at getTargets (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-compilation-targets\lib\index.js:187:17)
    at resolveOptions (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:66:15)
    at instantiateProvider (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:92:7)
    at E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:197:9
    at E:\github\nx-ui-ligo\node_modules\@babel\helper-plugin-utils\lib\index.js:33:12
    at async (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:36:33)
    at async (E:\github\nx-ui-ligo\node_modules\gensync\index.js:186:15)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:216:13
    at Generator.next (<anonymous>)
    at E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:181:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:21:3)
    at Generator.next (<anonymous>)
    at step (E:\github\nx-ui-ligo\node_modules\gensync\index.js:269:25)
    at evaluateAsync (E:\github\nx-ui-ligo\node_modules\gensync\index.js:291:5)
    at Function.errback (E:\github\nx-ui-ligo\node_modules\gensync\index.js:113:7)
    at errback (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:66:18)
    at async (E:\github\nx-ui-ligo\node_modules\gensync\index.js:188:17)
    at onFirstPause (E:\github\nx-ui-ligo\node_modules\gensync\index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:260:42)
    at loadPluginDescriptor.next (<anonymous>)
    at loadPluginDescriptors (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:129:33)
    at loadPluginDescriptors.next (<anonymous>)
    at E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:157:21
    at Generator.next (<anonymous>)
    at loadFullConfig (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:141:5)
    at loadFullConfig.next (<anonymous>)
    at transform (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\transform.js:20:45)
    at transform.next (<anonymous>)
    at step (E:\github\nx-ui-ligo\node_modules\gensync\index.js:269:25)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (E:\github\nx-ui-ligo\node_modules\gensync\index.js:223:11)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:189:28
    at E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:68:7
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:113:33
    at step (E:\github\nx-ui-ligo\node_modules\gensync\index.js:287:14)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (E:\github\nx-ui-ligo\node_modules\gensync\index.js:223:11)

ERROR in ./src/polyfills.ts
Module build failed (from ../../node_modules/@nx/webpack/src/utils/web-babel-loader.js):
Error: [BABEL] E:\github\nx-ui-ligo\apps\risk\src\polyfills.ts: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "E:\\github\\nx-ui-ligo\\node_modules\\@babel\\preset-env\\lib\\index.js$28")
    at validateTargetNames (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-compilation-targets\lib\index.js:71:13)
    at getTargets (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-compilation-targets\lib\index.js:187:17)
    at resolveOptions (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:66:15)
    at instantiateProvider (E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:92:7)
    at E:\github\nx-ui-ligo\node_modules\babel-plugin-polyfill-corejs3\node_modules\@babel\helper-define-polyfill-provider\lib\index.js:197:9
    at E:\github\nx-ui-ligo\node_modules\@babel\helper-plugin-utils\lib\index.js:33:12
    at async (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:36:33)
    at async (E:\github\nx-ui-ligo\node_modules\gensync\index.js:186:15)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:216:13
    at Generator.next (<anonymous>)
    at E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:181:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:21:3)
    at Generator.next (<anonymous>)
    at step (E:\github\nx-ui-ligo\node_modules\gensync\index.js:269:25)
    at evaluateAsync (E:\github\nx-ui-ligo\node_modules\gensync\index.js:291:5)
    at Function.errback (E:\github\nx-ui-ligo\node_modules\gensync\index.js:113:7)
    at errback (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\gensync-utils\async.js:66:18)
    at async (E:\github\nx-ui-ligo\node_modules\gensync\index.js:188:17)
    at onFirstPause (E:\github\nx-ui-ligo\node_modules\gensync\index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:260:42)
    at loadPluginDescriptor.next (<anonymous>)
    at loadPluginDescriptors (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:129:33)
    at loadPluginDescriptors.next (<anonymous>)
    at E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:157:21
    at Generator.next (<anonymous>)
    at loadFullConfig (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\config\full.js:141:5)
    at loadFullConfig.next (<anonymous>)
    at transform (E:\github\nx-ui-ligo\node_modules\@babel\core\lib\transform.js:20:45)
    at transform.next (<anonymous>)
    at step (E:\github\nx-ui-ligo\node_modules\gensync\index.js:269:25)
    at E:\github\nx-ui-ligo\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (E:\github\nx-ui-ligo\node_modules\gensync\index.js:223:11)

webpack compiled with 2 errors (b9e72b1d4904cd8a)
Type-checking in progress...
No errors found.

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

No response

jaysoo · 2023-07-18T15:14:04Z

@elizww which version did you migrate from?

Also, do you have a reproduction of this somewhere I can inspect?

elizww · 2023-07-19T07:00:41Z

@elizww which version did you migrate from?

Also, do you have a reproduction of this somewhere I can inspect?

16.2.2

I will try to reproduce

verbeckii · 2023-07-19T12:28:40Z

I also have the same issue:

ERROR in ./src/main.js
Module build failed (from ../../node_modules/@nx/webpack/src/utils/web-babel-loader.js):    
Error: [BABEL] D:\ntg\projectMy\apps\portal\src\main.js: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "D:\\ntg\\projectMy\\node_modules\\@babel\\preset-env\\lib\\index.js$26")

And here is steps on how I get it:
First of all I have two react apps: portal and admin-portal, where portal is the old one I created ~2 years ago, and admin-portal I created ~ 0.5 years ago
So

Yesterday I did upgrade my NX to 16.5.3 from 15.9.X. After all both work well
Today I did upgrade some npm packages to the newest, I upgraded from "@babel/preset-react": "^7.14.5" to "@babel/preset-react": "^7.22.5" and after that, my portal app started throwing the error while my new one admin-portal still working well

I don't know why it happened
It seems like babel v7.22.6 has already fixed it https://github.com/babel/babel/releases/tag/v7.22.6

jaysoo · 2023-07-19T13:49:50Z

Sounds like an issue with mismatched versions in babel packages, or a bug in a patch version?

Can you try using resolutions (yarn) or overrides (npm, pnpm) in package.json to set the relevant packages to 7.22.9?

"resolutions": {
  "@babel/core": "7.22.9",
  "@babel/preset-env": "7.22.9",
  "@babel/preset-react": "7.22.5",
  "@babel/helper-compilation-targets": "7.22.9"
}

Edit: Set preset-react to 7.22.5 since 7.22.9 is not published.

elizww · 2023-07-20T06:53:36Z

the @babel/preset-react latest version is 7.22.5,

I tried to follow you advice, also tried to install 7.22.9 on all, but got prompt that the latest known release for preset-env is 7.22.5, probably due to this ongoing issue with npm registry:
https://github.com/npm/feedback/discussions/937

(got this:

  Couldn't find any versions for "@babel/preset-react" that matches "7.22.9"

)

I tried to follow this commit from mui -
https://github.com/mui/mui-x/pull/9617/files

and my (temp) workaround is to update .browserslistrc:
last 2 iOS major versions --> not iOS > 73

jaysoo · 2023-07-20T13:34:03Z

Okay, I think the problem is that a newer babel package is matching opera_mobile, but @babel/helper-compilation-targets is out of date.

You can see what version(s) you have installed with:

npm ls @babel/helper-compilation-targets
pnpm why @babel/helper-compilation-targets
yarn why @babel/helper-compilation-targets

In your resolutions/overrides, try:

// npm/pnpm
"overrides": {
  "@babel/helper-compilation-targets": "7.22.9"
}

// yarn
"resolutions": {
  "@babel/helper-compilation-targets": "7.22.9"
}

elizww · 2023-07-20T14:08:34Z

Thanks! that works

jaysoo · 2023-07-20T14:10:25Z

Cool, we'll bump the versions on our end since the latest patch seems to be misaligned depending on how package managers resolve them.

github-actions · 2023-08-20T00:06:46Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

elizww added the type: bug label Jul 18, 2023

jaysoo added the scope: react Issues related to React support for Nx label Jul 18, 2023

jaysoo self-assigned this Jul 18, 2023

jaysoo added the blocked: repro needed label Jul 18, 2023

jaysoo mentioned this issue Jul 20, 2023

feat(js): bump babel versions #18220

Merged

meeroslav closed this as completed in #18220 Jul 20, 2023

github-actions bot added the outdated label Aug 20, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fail to run web dev server after upgrading to 16.5 (React) #18161

Fail to run web dev server after upgrading to 16.5 (React) #18161

elizww commented Jul 18, 2023 •

edited

Loading

jaysoo commented Jul 18, 2023 •

edited

Loading

elizww commented Jul 19, 2023

verbeckii commented Jul 19, 2023

jaysoo commented Jul 19, 2023 •

edited

Loading

elizww commented Jul 20, 2023 •

edited

Loading

jaysoo commented Jul 20, 2023 •

edited

Loading

elizww commented Jul 20, 2023

jaysoo commented Jul 20, 2023

github-actions bot commented Aug 20, 2023

Fail to run web dev server after upgrading to 16.5 (React) #18161

Fail to run web dev server after upgrading to 16.5 (React) #18161

Comments

elizww commented Jul 18, 2023 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Operating System

Additional Information

jaysoo commented Jul 18, 2023 • edited Loading

elizww commented Jul 19, 2023

verbeckii commented Jul 19, 2023

jaysoo commented Jul 19, 2023 • edited Loading

elizww commented Jul 20, 2023 • edited Loading

jaysoo commented Jul 20, 2023 • edited Loading

elizww commented Jul 20, 2023

jaysoo commented Jul 20, 2023

github-actions bot commented Aug 20, 2023

elizww commented Jul 18, 2023 •

edited

Loading

jaysoo commented Jul 18, 2023 •

edited

Loading

jaysoo commented Jul 19, 2023 •

edited

Loading

elizww commented Jul 20, 2023 •

edited

Loading

jaysoo commented Jul 20, 2023 •

edited

Loading