Nuxt•6mo ago

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed

Hey, I've just restarted working on my side project. Started a project from scratch, didn't change anything, and as soon as I visit localhost:3000 I just get the same error over and over. I did it from scratch as I was having the same issue on an already existing project that I tried to upgrade to Nuxt latest version. Starting a new Nuxt 3 project in Stackblitz is also not working and I am wondering if these are related to each other (https://stackblitz.com/github/nuxt/starter/tree/v3) The errors I am getting in the browser console:

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: Could not connect to the server.

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: Could not connect to the server.

        
GET http://localhost:24678/_nuxt/ net::ERR_CONNECTION_REFUSED client.ts:339

        
GET http://localhost:24678/_nuxt/ net::ERR_CONNECTION_REFUSED client.ts:339

The piece of code in client.ts is:

  const ping = async () => {
    // A fetch on a websocket URL will return a successful promise with status 400,
    // but will reject a networking error.
    // When running on middleware mode, it returns status 426, and an cors error happens if mode is not no-cors
    try {
      await fetch(`${pingHostProtocol}://${hostAndPath}`, {
        mode: 'no-cors',
        headers: {
          // Custom headers won't be included in a request with no-cors so (ab)use one of the
          // safelisted headers to identify the ping request
          Accept: 'text/x-vite-ping',
        },
      })

  const ping = async () => {
    // A fetch on a websocket URL will return a successful promise with status 400,
    // but will reject a networking error.
    // When running on middleware mode, it returns status 426, and an cors error happens if mode is not no-cors
    try {
      await fetch(`${pingHostProtocol}://${hostAndPath}`, {
        mode: 'no-cors',
        headers: {
          // Custom headers won't be included in a request with no-cors so (ab)use one of the
          // safelisted headers to identify the ping request
          Accept: 'text/x-vite-ping',
        },
      })

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

6 Replies

brianbOP•6mo ago

I cannot find anything about websockets or port 24678 in Nuxt 3 Docs.. Looks like it works on stackblitz if I use my own test repo. Thing is this happens locally but not on stackblitz. It didn't happen before and I am not aware of me changing anything regarding websockets / port 24678 I really need some help with this. I understand it is probably a vite issue, but I am expecting nuxt to work out of the box on macos.. It used to work before

Smef•6mo ago

When I run dev on my machine I do see a WS connection, but it's port 3000. Is your app running on 24678? ws://localhost:3000/_nuxt/

Anto'•4mo ago

did you find how to fix this ?

brianbOP•4mo ago

Yess. You have to set vite settings in nuxt config to use client port 3000. I can send a snippet when I get back to my laptop in a couple of hours

brianbOP•4mo ago

https://github.com/nuxt/nuxt/discussions/27779

GitHub

Getting weird websocket errors · nuxt nuxt · Discussion #27779

Hey, I've just gotten back to working on my side project. Tried to update existing repo but I kept seeing errors and devtools wasn't working. I have started a new repo from scratch. Updated...

brianbOP•4mo ago

Here you go

Gaming

Programming

WebSocket connection to 'ws://localhost:24678/_nuxt/' failed