[bug] WebSocket HMR not working as expected with Nuxt

[Sun-ZhenXing]

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]

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.

[gkkirilov]

Hey @Sun-ZhenXing can you share a working example, as I am getting a white screen creating a nuxt based app for mobile

[gkkirilov]

I dig a little bit further and saw those errors as the culprit of the white screen

11-18 01:04:14.193 15907 15907 E Tauri/Console: File: - Line 138 - Msg: Uncaught TypeError: Cannot redefine property: postMessage
11-18 01:04:14.194 15907 15907 E Tauri/Console: File: - Line 2 - Msg: Uncaught TypeError: Cannot redefine property: metadata
11-18 01:04:14.194 15907 15907 E Tauri/Console: File: - Line 25 - Msg: Uncaught TypeError: Cannot redefine property: TAURI_PATTERN
11-18 01:04:14.194 15907 15907 E Tauri/Console: File: - Line 5 - Msg: Uncaught TypeError: Cannot redefine property: path