[macOS] HMR not working inside Wails frame

[j-bullard]

Description

I am running into an issue where changes inside the frontend are not being updated in the Wails window. Navigating to both the Vite frontened (5173) and Wails dev server (34115) results in HMR working just fine but not inside the Wails window.

Terminal log shows HMR being triggered but nothing is updated in Wails browser.

7:35:48 AM [vite] hmr update /src/routes/+page.svelte

Opening developer tools, I get the following errors:

WebSocket connection to 'ws://wails.localhost:34117/' failed: A server with the specified hostname could not be found.

Invalid url for WebSocket ws://localhost:undefined/

Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.

Note: I changed to 34117 above based on another recommendation. Same behavior as leaving the port as auto and using 34115.

To Reproduce

1. wails init -n new-app -t svelte
2. cd new-app
3. wails dev
4. Modify App.svelte

Expected behaviour

HMR would result in the browser inside Wails to be refreshed

Screenshots

No response

Attempted Fixes

Attempted to change ports in wails.json

System Details

# Wails
Version | v2.6.0

# System
┌─────────────────────────┐
| OS           | MacOS    |
| Version      | 14.1     |
| ID           | 23B74    |
| Go Version   | go1.21.4 |
| Platform     | darwin   |
| Architecture | arm64    |
└─────────────────────────┘

# Dependencies
┌────────────────────────────────────────────────────────────────┐
| Dependency                | Package Name | Status    | Version |
| Xcode command line tools  | N/A          | Installed | 2403    |
| Nodejs                    | N/A          | Installed | 21.2.0  |
| npm                       | N/A          | Installed | 10.2.3  |
| *Xcode                    | N/A          | Available |         |
| *upx                      | N/A          | Available |         |
| *nsis                     | N/A          | Installed | v3.09   |
└─────────────────── * - Optional Dependency ────────────────────┘

# Diagnosis
Optional package(s) installation details: 
  - Xcode: Available at https://apps.apple.com/us/app/xcode/id497799835
  - upx : Available at https://upx.github.io/

 SUCCESS  Your system is ready for Wails development!

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

### Additional context

_No response_

[j-bullard]

Forgot that I swapped out Svelte for SvelteKit using these directions which is what broke HMR. Trying to figure out why HMR is no longer working with SK.

[j-bullard]

Ok, so the problem with HMR not working is based on the vite and @vitejs/plugin-react version installed. Removing the default frontend directory and initializing a new vite project, regardless of framework breaks HMR with Wails.

However, removing the latest version of these two dependencies and installing the ones from the original frontend vite@3.0.7 and @vitejs/plugin-react@2.0.1 restores the HMR.

[j-bullard]

Taking a look through the vite-setup-catalogue and configured Vite to be behind a reverse proxy.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
});

This gets HMR working again but I still get the following error in console:

WebSocket connection to 'ws://wails.localhost:34115/' failed: A server with the specified hostname could not be found.

Maybe later I'll play around with Vite proxy settings to hopefully get rid of that.

[leaanthony]

Thanks for reporting this. This needs investigating. Something must have changed in the version update.

[j-bullard]

So it changed with Vite 4. If I used any version prior to that it worked. This was a breaking change for Vite because of breaking changes in Rollup.

[leaanthony]

Ah right. I guess we can only support one version for the templates. Do you know specifically what the change was? Perhaps we can accommodate these changes better in v3

[stffabi]

WebSocket connection to 'ws://wails.localhost:34117/' failed: A server with the specified hostname could not be found.

Seems like newer MacOS releases don't resolve wails.localhost anymore to 127.0.0.1. I'm sure I've tested that previously and it worked. So we need to change the hostname to localhost to resolve this issue.

[laher]

I'm just noting that I've temporarily worked around this by adding this to my /etc/hosts file:

127.0.0.1 wails.localhost

Obviously this is only going to help during my local development, but it's fine for the time being until a fix arrives (or I can downgrade vite if need be).

p.s. I ❤️ Wails

[mujehoxe]

Fixes?

[Blankeos]

🟢 cd frontend && pnpm install vite@3.0.7. Fixes this for me as well. But it's a work-around.

I don't know for sure what I need from the newer Vite 5 yet but we'll see.

[mujehoxe]

🟢 cd frontend && pnpm install vite@3.0.7. Fixes this for me as well. But it's a work-around.

I don't know for sure what I need from the newer Vite 5 yet but we'll see.

Not using vite, just vanilla js

[j-bullard]

Coming back around to this I did some more tinkering and here is my vite.config.ts that allows HMR to work and removes the aforementioned error. I've also included the package.json to show this is running vite@5.2.0.

Spent some time understanding vite.hmr

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    hmr: {
      host: 'localhost',
      protocol: 'ws',
    },
  },
});

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "prettier": "^3.2.5",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }
}

[Blankeos]

Spent some time understanding vite.hmr

@j-bullard Godsent solution this one. Thank you! I'll try it out now.

EDIT: ✅ Confirmed, the solution works! Great job, man!

[suifengtec]

127.0.0.1 wails.localhost

old six!

[zwjjiaozhu]

回到这个问题，我又做了一些修改，下面是我的vite.config.ts，它允许 HMR 工作并消除上述错误。我还添加了package.json以显示它正在运行vite@5.2.0。

花了一些时间了解vite.hmr

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    hmr: {
      host: 'localhost',
      protocol: 'ws',
    },
  },
});

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "prettier": "^3.2.5",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }
}

it is works,thanks

[chenasraf]

IMO, this should be part of the default vite template

[nzoschke]

Thanks! I went through https://wails.io/docs/next/guides/sveltekit and also saw HMR not working in the Wails app. Indeed adding this diff fixes it:

--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,6 +1,12 @@
 export default defineConfig({
+  server: {
+    hmr: {
+      host: "localhost",
+      protocol: "ws",
+    },
+  },
 });