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/app@5.0.6
[capacitor] @capacitor/haptics@5.0.6
[capacitor] @capacitor/keyboard@5.0.6
[capacitor] @capacitor/status-bar@5.0.6
[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 and npm that I’m using:
node.js- v18.14.0
npm- 8.19.2
And in my project I’m using the following @capacitor/cli and @ionic/cli
├── @capacitor/android@5.2.2
├── @capacitor/app@5.0.6
├── @capacitor/cli@5.2.1
├── @capacitor/core@5.2.2
├── @capacitor/haptics@5.0.6
├── @capacitor/keyboard@5.0.6
├── @capacitor/status-bar@5.0.6
├── @ionic/cli@6.20.9
├── @ionic/react-router@7.2.1
├── @ionic/react@7.2.1
├── @testing-library/jest-dom@5.17.0
├── @testing-library/react@13.4.0
├── @testing-library/user-event@12.8.3
├── @types/jest@26.0.24
├── @types/node@12.20.55
├── @types/react-dom@18.2.7
├── @types/react-router-dom@5.3.3
├── @types/react-router@5.1.20
├── @types/react@18.2.18
├── @typescript-eslint/eslint-plugin@5.62.0
├── @typescript-eslint/parser@5.62.0
├── eslint-plugin-react@7.33.1
├── eslint@8.46.0
├── history@4.10.1
├── ionicons@7.1.2
├── react-dom@18.2.0
├── react-router-dom@5.3.4
├── react-router@5.3.4
├── react-scripts@5.0.1
├── react@18.2.0
├── typescript@4.9.5
├── web-vitals@0.2.4
├── workbox-background-sync@5.1.4
├── workbox-broadcast-update@5.1.4
├── workbox-cacheable-response@5.1.4
├── workbox-core@5.1.4
├── workbox-expiration@5.1.4
├── workbox-google-analytics@5.1.4
├── workbox-navigation-preload@5.1.4
├── workbox-precaching@5.1.4
├── workbox-range-requests@5.1.4
├── workbox-routing@5.1.4
├── workbox-strategies@5.1.4
└── workbox-streams@5.1.4
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. Does anyone know what could be happening?
Even though I’m successfully running my projects with npm start, the hot reload functionality of ionic cap run android -l --external is a very useful feature for development…