Ubuntu – Hot reload always fails on Ionic React

I’m using the command ionic cap run android -l --external on my ionic react project that I’ve created with ionic start my-app --type=react --no-ts. However, even though it asks me to select the device correctly and then it asks which IP on my computer I want the application to run, it fails just after the development server starts… Here is what happens when I try to execute it:

ionic cap run android -l --external
? Which device would you like to target? samsung SM-G970F
> capacitor sync android
[capacitor] ✔ Copying web assets from build to android/app/src/main/assets/public in 227.67ms
[capacitor] ✔ Creating capacitor.config.json in android/app/src/main/assets in 1.48ms
[capacitor] ✔ copy android in 264.96ms
[capacitor] ✔ Updating Android plugins in 9.11ms
[capacitor] [info] Found 4 Capacitor plugins for android:
[capacitor]        @capacitor/[email protected]
[capacitor]        @capacitor/[email protected]
[capacitor]        @capacitor/[email protected]
[capacitor]        @capacitor/[email protected]
[capacitor] ✔ update android in 75.62ms
[capacitor] [info] Sync finished in 0.343s
[WARN] Multiple network interfaces detected!
       
       You will be prompted to select an external-facing IP for the dev server that your device or emulator can access.
       Make sure your device is on the same Wi-Fi network as your computer. Learn more about Live Reload in the docs[1].
       
       To bypass this prompt, use the --public-host option (e.g. --public-host=10.20.0.111). You can alternatively bind
       the dev server to a specific IP (e.g. --host=10.20.0.111).
       
       [1]: https://ion.link/livereload-docs
       
? Please select which IP to use: 10.20.0.111 (wlo1)
> react-scripts start
[react-scripts] Attempting to bind to HOST environment variable: 0.0.0.0
[react-scripts] If this was unintentional, check that you haven't mistakenly set it in your shell.
[react-scripts] Learn more here: https://cra.link/advanced-config
[react-scripts] (node:1140815) [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:1140815) [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:8101
[react-scripts]   On Your Network:  http://10.20.0.111:8101
[react-scripts] Note that the development build is not optimized.
[react-scripts] To create a production build, use npm run build.

[INFO] Development server running!
       
       Local: http://localhost:8101
       External: http://10.20.0.111:8101, http://172.20.0.1:8101, http://172.19.0.1:8101, http://172.26.0.1:8101,
       http://172.21.0.1:8101, http://172.22.0.1:8101, http://172.18.0.1:8101, http://172.17.0.1:8101
       
       Use Ctrl+C to quit this process

node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: write EINVAL
    at process.target._send (node:internal/child_process:874:20)
    at process.target.send (node:internal/child_process:747:19)
    at Object.emit (/usr/local/lib/node_modules/@ionic/cli/lib/events.js:12:13)
    at ReactServeRunner.run (/usr/local/lib/node_modules/@ionic/cli/lib/serve.js:175:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async RunCommand.runServe (/usr/local/lib/node_modules/@ionic/cli/commands/capacitor/base.js:191:33)
    at async RunCommand.run (/usr/local/lib/node_modules/@ionic/cli/commands/capacitor/run.js:220:13)
    at async Promise.all (index 0)
    at async RunCommand.execute (/usr/local/lib/node_modules/@ionic/cli/lib/command.js:81:9)
    at async Executor.run (/usr/local/lib/node_modules/@ionic/cli/lib/executor.js:54:9)
Emitted 'error' event on process instance at:
    at processEmit [as emit] (/usr/local/lib/node_modules/@ionic/cli/node_modules/signal-exit/index.js:199:34)
    at node:internal/child_process:878:39
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  errno: -22,
  code: 'EINVAL',
  syscall: 'write'
}

Here are the versions of node.js, npm and OS that I’m using:

node.js- v18.14.0
npm- 8.19.2
Ubuntu 22.04

And in my project, I’m using the following @capacitor/cli and @ionic/cli

├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @capacitor/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

When I run npm start my project runs perfectly fine. However, the commands ionic cap run android -l --external and ionic serve always return the first error I showed here. I’ve tried changing the versions of npm, node.js, @ionic/cli and @capacitor/cli to different ones but no matter which version I choose the error is always there. What is happening? Why does the hot reload fail to start? That’s basically an application created from scratch with the official ionic tools.

Even though I’m successfully running my projects with npm start, as far as I understood the hot reload functionality would allow me to see the changes in my frontend development in real-time while getting data from the phone. I’ve been using the command ionic capacitor run android --target=my-device-number to deploy the application to my phone but it takes too long, the hot reload would be better for that.