Ionic React上的热重新加载始终失败

ewm0tg9j  于 2023-09-28  发布在  Ionic
关注(0)|答案(2)|浏览(124)

我在用ionic start my-app --type=react --no-ts创建的ionic react项目中使用了ionic cap run android -l --external命令。然而,即使它要求我正确选择设备,然后询问我希望应用程序运行在我的计算机上的哪个IP,它在开发服务器启动后就失败了......下面是我尝试执行它时发生的情况:

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'
}

以下是我使用的node.jsnpm和OS的版本:

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

在我的项目中,我使用了以下@capacitor/cli@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]

当我运行npm start时,我的项目运行得非常好。但是,命令ionic cap run android -l --externalionic serve总是返回我在这里显示的第一个错误。我试过将npmnode.js@ionic/cli@capacitor/cli的版本更改为不同的版本,但无论我选择哪个版本,错误总是存在。这是怎么回事?为什么热重装无法启动?这基本上是一个应用程序从头开始创建的官方离子工具。
尽管我成功地使用npm start运行了我的项目,但据我所知,热重载功能可以让我在从手机获取数据的同时实时查看前端开发的变化。我一直在使用命令ionic capacitor run android --target=my-device-number将应用程序部署到我的手机上,但这需要太长时间,热重载会更好。

mbjcgjjk

mbjcgjjk1#

尝试,测试,按照ionic-team/capacitor ~ Getting Started部分,一个单独的新项目:

ionic start myNewApp blank --type=react
cd myNewApp
ionic integrations enable capacitor
npx cap init
ionic cap run android -l --external

有:

  • -l启用实时重新加载。
  • --external允许同一网络上的设备访问dev服务器。

出现提示时,选择要在其上运行的设备。确保设备已连接到您的开发计算机,并且该计算机和设备位于同一网络上。
检查您的防火墙或其他网络配置是否允许设备和开发计算机之间的通信。
当您运行--external时,通常会提示您选择要使用的IP地址。它应该是一个可以从测试设备访问的IP地址。
我看到error "write EINVAL"nodejs/node issue 16141中被引用了很多次,所以你可能需要切换版本(例如,使用using nvm (Node Version Manager)在不同项目的不同Node版本之间切换),只是为了检查这是否是一个版本兼容性问题。

cgvd09ve

cgvd09ve2#

你在用vpn吗?听起来好像主机连接有问题。
尝试关闭vpn,然后再试一次。听起来像是防火墙或其他东西阻止了应用程序的实时重新加载。
Ionic为VS代码提供了一个插件,它支持许多功能,帮助运行/打开/关闭实时重载。

相关问题