ionic serve stuck on "Waiting for connectivity with react-scripts" with Node v18

[mirkonasato]

Description:

Node v18.12.1 is the current LTS version. Running ionic serve in an Ionic React project created by the Ionic CLI keeps logging

[INFO] Waiting for connectivity with react-scripts...

and as a result live reload doesn't work.

The exact same project runs fine with Node v16.18.1.

Steps to Reproduce:

Simply create a new Ionic React project and start it

ionic start my-app blank --type=react
cd my-app
ionic serve

Output:

% ionic serve
> react-scripts start
[react-scripts] (node:15924) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[react-scripts] (Use `node --trace-deprecation ...` to show where the warning was created)
[react-scripts] (node:15924) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[react-scripts] Starting the development server...
[react-scripts] 
[react-scripts] You can now view my-app in the browser.
[react-scripts]   Local:            http://localhost:8100
[react-scripts]   On Your Network:  http://192.168.1.120:8100
[react-scripts] Note that the development build is not optimized.
[react-scripts] To create a production build, use npm run build.
[react-scripts] webpack compiled successfully
[react-scripts] Files successfully emitted, waiting for typecheck results...
[react-scripts] Issues checking in progress...
[react-scripts] No issues found.
[INFO] Waiting for connectivity with react-scripts...
[INFO] Waiting for connectivity with react-scripts...
(repeats last message forever)

My ionic info:

Ionic:

   Ionic CLI       : 6.20.4 (/Users/mirko/.nvm/versions/node/v18.12.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.4.0

Capacitor:

   Capacitor CLI      : 4.6.1
   @capacitor/android : not installed
   @capacitor/core    : 4.6.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v18.12.1 (/Users/mirko/.nvm/versions/node/v18.12.1/bin/node)
   npm    : 8.19.2
   OS     : macOS

Other Information:

In the Ionic Forum: [INFO] Waiting for connectivity with react-scripts

[Ethan-Johnson17]

I have something similar with Vue, but the message is Waiting for connectivity with vue-cli-service...

[DercilioFontes]

Using react-scripts start directly is not getting the “Waiting for connectivity with react-scripts... “ issue from ionic serve It can be a workaround until we have a solution for it.

"scripts": {
    "start": "react-scripts start",
...
}

Run npm run start

[mrozema]

I had this same issue after updating to Node v18. I was able to get around it by adding the --external option (even though it seems like it shouldn't be required).

[drmahikbov]

Still no fix ?

[mirko77]

Same issue here.... Waiting for connectivity with vue-cli-service...

--external seems to help

[ZhaniWalid]

I had this same issue after updating to Node v18. I was able to get around it by adding the --external option (even though it seems like it shouldn't be required).

Thank you very much. That helped me to run my Ionic-React app after 1 month of researchers. Thank you a lot <3.

[emmamoinat]

This all works fine in node 20 without the --external flag

[chawes13]

On Node 20 with Ionic 7 and capacitor 6 and with the --external flag I'm seeing the "Waiting for connectivity with" info statement. If I drop the flag, then it does load the app, but the web page connection is refused.

ionic capacitor run android --livereload --external worked in this configuration when using Webpack, but no longer works now that we've switched to Vite.

EDIT: It works on a fresh install of Ionic, but doesn't work on my existing project (even after upgrading to Ionic 8) 🥴

[chawes13]

I got it to work by setting host: true in my Vite configuration.

https://github.com/vitejs/vite/discussions/3396