[bug] WebSocket HMR not working as expected with Nuxt
Sun-ZhenXing opened this issue · 1 comments
Sun-ZhenXing commented
Describe the bug
The methods described in this document does not mark HMR work on mobile devices.
Because Nuxt does not use vite's HMR config. Nuxt rewrite vite config, and uses ws://$host:$port/_nuxt/
to provide HMR:
09-27 18:01:57.473 9019 9019 E Tauri/Console: File: http://tauri.localhost/_nuxt/@vite/client - Line 535 - Msg: WebSocket connection to 'ws://tauri.localhost/_nuxt/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
09-27 18:01:57.473 9019 9019 E Tauri/Console: File: http://tauri.localhost/_nuxt/@vite/client - Line 535 - Msg: Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/_nuxt/' is invalid.
It tries to connect to localhost:undefined
and tauri.localhost
, but this is incorrect.
All endpoints have been tried and there is no WebSocket support. This may require a direct connection to the host.
Reproduction
From official document: https://v2.tauri.app/start/frontend/nuxt/
adb devices # connect a Android devices ...
pnpm tauri android dev
If this is not detailed enough, please call me for reproduction.
Expected behavior
No error.
Full tauri info
output
[✔] Environment
- OS: Windows 10.0.22631 x86_64 (X64)
✔ WebView2: 129.0.2792.52
✔ MSVC: Visual Studio Community 2022
✔ rustc: 1.81.0 (eeb90cda1 2024-09-04)
✔ cargo: 1.81.0 (2dbb1af80 2024-08-20)
✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
- node: 20.14.0
- pnpm: 9.11.0
- npm: 10.7.0
- bun: 1.1.28
[-] Packages
- tauri 🦀: 2.0.0-rc.15
- tauri-build 🦀: 2.0.0-rc.12
- wry 🦀: 0.43.1
- tao 🦀: 0.30.1
- @tauri-apps/api : 2.0.0-rc.5
- @tauri-apps/cli : 2.0.0-rc.16
[-] Plugins
- tauri-plugin-log 🦀: 2.0.0-rc.2
- @tauri-apps/plugin-log : not installed!
[-] App
- build-type: bundle
- CSP: connect-src ws://*
- frontendDist: ../dist
- devUrl: http://localhost:3000/
- framework: Vue.js (Nuxt)
- bundler: Webpack
Stack trace
09-27 18:02:41.207 9019 9019 E Tauri/Console: File: http://tauri.localhost/_nuxt/@vite/client - Line 535 - Msg: WebSocket connection to 'ws://tauri.localhost/_nuxt/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
09-27 18:02:41.209 9019 9019 E Tauri/Console: File: http://tauri.localhost/_nuxt/@vite/client - Line 535 - Msg: Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/_nuxt/' is invalid.
09-27 18:04:34.822 9019 9019 I HwViewRootImpl: removeInvalidNode jank list is null
09-27 18:04:37.867 9019 9019 I HwViewRootImpl: removeInvalidNode jank list is null
09-27 18:04:40.996 9019 9019 E Tauri/Console: File: http://tauri.localhost/__nuxt_devtools__/client/_nuxt/l4ouzdbv.js - Line 8 - Msg: Uncaught (in promise) Error: [birpc] timeout on calling "getOptions"
09-27 18:04:41.307 9019 9019 E Tauri/Console: File: http://tauri.localhost/__nuxt_devtools__/client/_nuxt/l4ouzdbv.js - Line 8 - Msg: Uncaught (in promise) Error: [birpc] timeout on calling "getModuleOptions"
09-27 18:04:41.309 9019 9019 E Tauri/Console: File: http://tauri.localhost/__nuxt_devtools__/client/_nuxt/l4ouzdbv.js - Line 8 - Msg: Uncaught (in promise) Error: [birpc] timeout on calling "getOptions"
09-27 18:04:41.312 9019 9019 E Tauri/Console: File: http://tauri.localhost/__nuxt_devtools__/client/_nuxt/l4ouzdbv.js - Line 8 - Msg: Uncaught (in promise) Error: [birpc] timeout on calling "telemetryEvent"
09-27 18:04:41.314 9019 9019 E Tauri/Console: File: http://tauri.localhost/__nuxt_devtools__/client/_nuxt/l4ouzdbv.js - Line 8 - Msg: Uncaught (in promise) Error: [birpc] timeout on calling "getOptions"
Additional context
No response
Sun-ZhenXing commented
I found a workaround:
{
devServer: {
host: isMobile ? '0.0.0.0' : undefined,
},
hooks: {
'vite:extend': function ({ config }) {
if (config.server && config.server.hmr && config.server.hmr !== true) {
config.server.hmr.protocol = 'ws'
config.server.hmr.host = '192.168.XXX.XXX'
config.server.hmr.port = 3000
}
},
},
vite: {
clearScreen: false,
envPrefix: ['VITE_', 'TAURI_'],
server: {
strictPort: true,
watch: {
ignored: ['**/src-tauri/**'],
},
},
},
}
But I think undefined
appearing in URLs is a bug.