`Error forwarding websocket request: AggregateError` with `NS_ERROR_WEBSOCKET_CONNECTION_REFUSED` when migrating Remix compiler to Vite

[nullndr]

I'm trying to migrate my remix app from the remix compiler to vite, when I run npm run dev the vite server starts, and I can enter my dev app.

But the Error forwarding websocket request: AggregateError error is shown in the console, and the application keeps re-rendering itself.

 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
 │            remix │ [shopify-app/INFO] Authenticating admin request
Error forwarding websocket request: AggregateError

From the browser console I can see there is the NS_ERROR_WEBSOCKET_CONNECTION_REFUSED error, do you know if this is a problem with the browser or the vite config? It looks strange since my vite config is like the template one:

import { vitePlugin as remix } from "@remix-run/dev";
import { vercelPreset } from "@vercel/remix/vite";
import { defineConfig, type UserConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

const host = new URL(process.env.SHOPIFY_APP_URL || "http://localhost")
  .hostname;

export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr:
      host === "localhost"
        ? {
            host,
            protocol: "ws",
            port: 64999,
            clientPort: 64999,
          }
        : {
            host,
            protocol: "wss",
            port: parseInt(process.env.FRONTEND_PORT!) || 8002,
            clientPort: 443,
          },
    fs: {
      allow: ["app", "node_modules"],
    },
  },
  ssr: {
    noExternal: [
      "@shopify/polaris-viz",
      "@shopify/polaris-viz-core",
      "d3-scale",
    ],
  },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
      presets: [vercelPreset()],
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
  },
}) satisfies UserConfig;

I also tried to delete the .cache and build folder, the application stops re-rendering itself but when I navigate with the <NavMenu/> component the login page is shown.

Have any of you ever had this problem while migrating the app?

[matteodepalo]

Hi @nullndr thank you for reporting this, we'll take a look.

[matteodepalo]

Out of curiosity, have you tried this with different browsers?

[nullndr]

Hi @matteodepalo, I tested this with Firefox and Chromium, same behaviour on both

[s-prestele-tqgg]

I have had the same issue and for me it was related to having the SHOPIFY_APP_URL in my local env. After removing the issue was resolved.

[nullndr]

@s-prestele-tqgg interesting, I double-checked but I have not defined the SHOPIFY_APP_URL anywhere in my envs.

[s-prestele-tqgg]

another thing that might cause this is that HMR is now handled by vite. While previously it was in the shopify.web.toml

If not done yet you need to remove this:

[hmr_server] http_paths = ["/ping"]

[nullndr]

@s-prestele-tqgg that was the problem!

Works without any problem once deleted these two little lines!

Thank you so much!

[darrynten]

Thank you!