SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid

[thdoan]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

I'm seeing these errors while in development (npm run dev):

I don't recall seeing this error message before. Can I safely ignore these errors, or is it something that needs to be fixed?

Reproduction

https://github.com/Jemeni11/Chrome-Extension-CRXJS-Vite-TS-Template

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 15.63 GB / 31.95 GB
  Binaries:
    Node: 16.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.58)
    Internet Explorer: 11.0.19041.1566

Severity

annoyance

[thdoan]

Maybe this will resolve it?

https://stackoverflow.com/a/41628270/452587

[devnomic]

Try add this to your vite config

server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173,
    },
  },

[thdoan]

@devnomic thanks for the setting -- that fixed the "failed to construct websocket" error, but now whenever I reload the extension in dev mode it throws an "extension context invalidated" error for each opened tab:

Is there a setting we can add to suppress these errors? I know they can be ignored, but sometimes when we're in the middle of development a real error can be lost in the middle of all these context invalidated errors.

[devnomic]

I didn't get those errors,
Right now i'm using these dependencies seems working fine for me (for now).

"vite": "^4.2.2",
"@vitejs/plugin-react": "^3.1.0",
"@crxjs/vite-plugin": "^2.0.0-beta.16",

Maybe you can try using same or check working versions from this repo from crxjs author
https://github.com/crxjs/vite-4-react

[thyngster]

This is related to Vite 4.3.X
#693

[thdoan]

My setup:

    "@crxjs/vite-plugin": "^2.0.0-beta.16",
    "@sveltejs/vite-plugin-svelte": "^2.1.0",
    "vite": "^4.3.1"

[HenokT]

Downgrading Vite to 4.2.x fixed this issue for me: "vite": "~4.2.2". Thanks @thyngster

[ongnxco]

Downgrading Vite to 4.2.x fixed this issue for me: "vite": "~4.2.2". Thanks @thyngster

client.ts:78 WebSocket connection to 'ws://localhost/' failed:

[prakhartiwari0]

Try add this to your vite config

server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173,
    },
  },

Amazing!! Thanks for this, it solves my issue :)

[joshwilson-dbx]

Setting the server ports as @devnomic described resolves this for me as well. I did not need to downgrade any packages.
Looks like I'm on vite@npm:4.5.0

% yarn info --name-only
├─ @crxjs/vite-plugin@npm:2.0.0-beta.19
├─ @mantine/core@npm:7.1.7
├─ @mantine/hooks@npm:7.1.7
├─ @types/react-dom@npm:18.2.14
├─ @types/react@npm:18.2.33
├─ @vitejs/plugin-react-swc@npm:3.4.0
├─ autoprefixer@npm:10.4.16
├─ eslint-plugin-react-hooks@npm:4.6.0
├─ eslint-plugin-react-refresh@npm:0.4.4
├─ eslint-plugin-react@npm:7.33.2
├─ eslint@npm:8.52.0
├─ postcss-preset-mantine@npm:1.9.0
├─ postcss-simple-vars@npm:7.0.1
├─ postcss@npm:8.4.31
├─ react-dom@npm:18.2.0
├─ react@npm:18.2.0
├─ tailwindcss@npm:3.3.5
├─ vite-3-yarn@workspace:.
└─ vite@npm:4.5.0

[Babaktrad]

I have the same error and a very slow @Vite server.

Environment
Operating System: Ubuntu 22.04
Node Version: v18.17.0
Nuxt Version: 3.8.2
Nitro version: 2.8.1
Package Manager: [email protected]

Describe the bug
I configured Nginx to serve Nuxt project with server_name nuxt.example.local while this will be proxied on localhost on port 8082. Then in location /etc/hosts, I pointed 127.0.0.1 to that server name. To run Nuxt project on localhost:8082, I'm using command yarn dev --port 8082. But with this setup and configuration I get the same error as above in my browser console:

The URL 'ws://localhost:undefined/_nuxt/' is invalid.

Nginx config file

server {
    listen 80;
    server_name     nuxt.example.local;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://localhost:8082;
    }
}

Nuxt config file

export default defineNuxtConfig({
  server: {
    port: 8082,
    strictPort: true,
    hmr: {
      port: 8082,
    },
  },
}

Hosts file

127.0.0.1    nuxt.example.local

[Babaktrad]

I have the same error and a very slow @Vite server.

Environment Operating System: Ubuntu 22.04 Node Version: v18.17.0 Nuxt Version: 3.8.2 Nitro version: 2.8.1 Package Manager: [email protected]

Describe the bug I configured Nginx to serve Nuxt project with server_name nuxt.example.local while this will be proxied on localhost on port 8082. Then in location /etc/hosts, I pointed 127.0.0.1 to that server name. To run Nuxt project on localhost:8082, I'm using command yarn dev --port 8082. But with this setup and configuration I get the same error as above in my browser console:

The URL 'ws://localhost:undefined/_nuxt/' is invalid.

Nginx config file

server {
    listen 80;
    server_name     nuxt.example.local;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://localhost:8082;
    }
}

Nuxt config file

export default defineNuxtConfig({
  server: {
    port: 8082,
    strictPort: true,
    hmr: {
      port: 8082,
    },
  },
}

Hosts file

127.0.0.1    nuxt.example.local

Oops, I made a mistake in my previous comment. Let me correct that:

export default defineNuxtConfig({
  vite: {
    server: {
      strictPort: true,
      hmr: {
        port: 8082,
      },
    },
  },
}

[lukas-pierce]

I spend hours trying different settings, but the problem - Nuxt ignoring your hmr settings. (Nuxt 3.8.2)
So you just need extend vite config in hook:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  ssr: false,
  css: [
    'bootstrap/dist/css/bootstrap.min.css',
    '~/assets/scss/main.scss',
  ],
  vite: {
    server: {
      // In my case I use Nginx reverse proxy
      // with self signet certificate (mkcert)
      // so I just want this works on localhost:3000
      // but these settings ignoring. You can check hmr is false
      // in 'vite:configResolved' hook
      // And the most efficient and elegant way to fix it is
      // override vite config in 'vite:extendConfig' hook below
      hmr: {
        protocol: 'ws',
        host: 'localhost',
      },
    },
  },
  hooks: {
    'vite:extendConfig' (viteInlineConfig, env) {
      viteInlineConfig.server = {
        ...viteInlineConfig.server,
        hmr: {
          protocol: 'ws',
          host: 'localhost',
        },
      }
    },
  },
})

[giovannimanzoni]

Hi, maybe this can help you if hmr is ignored: nuxt/nuxt#12003 (comment)

[ZacBouh]

Hi, I am getting a failed to construct Websocket with ws://localhost:undefined?connectToken=undefined

Using vite/5.2.8 win32-x64 node-v20.11.0 , neu CLI: v11.0.1, Neutralinojs binaries: v5.1.0

Vite dev server is correctly configured and listening :

server: {
    port: 3000,
    strictPort: true,
    hmr: {
      protocol: "ws",
      host: "localhost",
      port: 3000,
    },
  },

neutralino cli config :

"cli": {
    "binaryName": "App",
    "resourcesPath": "/vite-project/build/",
    "extensionsPath": "/extensions/",
    "binaryVersion": "5.1.0",
    "frontendLibrary": {
      "patchFile": "/vite-project/index.html",
      "devUrl": "http://localhost:3000"
    }
  }

It looks like this is due to the window.NL_* not being assigned when the browser is opened, still cannot manage to solve this.

So if I'm digging correctly the problem is that le global variables are not loaded, when looking through the doc section "how to work with front end frameworks" , there is an example given with react that specify importing this script in the main entrypoint : <script src="%PUBLIC_URL%/__neutralino_globals.js"></script> .
But Im not working with react, and i dont see what this __neutralino_globals.js refers to ? Am I supposed to copy/paste the minified client from the node module to my src ?

Well found out in this source that __neutralino_globals.js is actually generated on the fly

It would be nice to have this piece of info in the official documentation.

[mobilefirstirshad]

Try add this to your vite config

server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173,
    },
  },

It works for me

[EnjoyKojima]

@lukas-pierce
Hi !!!!!
You saved my life!!
Thank you!!

[raphaelbernhart]

FYI: For me the problem was a installed chrome extension regarding CORS. Disabling it resolved the issue.

[mundane799699]

Try add this to your vite config

server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173,
    },
  },

it works for me.thank you!

[Rafalsky]

I was just wondering… All of your configurations above have duplicated ports for both server.port and hmr.port. According to the documentation, the hmr section should only be configured if we need a different port configuration than the one for the server. Can we simply remove the hmr section from your configurations above, or am I missing something?