WebSocket connection to 'ws:<URL>/_next/webpack-hmr' failed: WebSocket is closed before the connection is established

Question

Hi am having this problem, i try to make subscriptions with graphql in nextjs, but something is wrong and i dont have any idea how fix it. I am having websocket error - "WebSocket connection to 'ws:/_next/webpack-hmr' failed: WebSocket is closed before the connection is established."

You can check code here - https://github.com/LoQeN00/messenger-2.0.git

error

graphql-setup

Bundestag

Please make sure to post code and errors as text directly to the question (and not as images), and format them appropriately. – Pacify

please make sure that the links provided in the question is working – Resnatron

Answer 1

I restarted my PC and this issue was resolved for me according to this post on github

Pipes

As in the link you shared, Neither I have any other middleware/proxy settings, restarting my computer fixed it. The answer was helpful. thanks. – Darra

For me it was enough to restart my browser or just re-open the as incognito (maybe an extension was interfering). – Haemophilia

Answer 2

I needed to remove

assetPrefix: "./"

from next.config.js so HMR worked and those warnings disappeared. Problem was both in FF and Chrome for me.

Cottage

I wonder why the issue comes because of assetPrefix – Rounder

Answer 3

If you are using Nginx: https://nextjs.org/docs/pages/building-your-application/upgrading/version-12#hmr-connection-now-uses-a-websocket

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Okelley

Answer 4

If it could be helpful, I was having the same issue, after debugging I found that I was only getting the error for hot reloading in the Brave browser and my Brave shield was off for my local dev website. and I turned it on and now hot reloading works perfectly for me. FYI Before that, I also tried deleting cookies, .next cache files, restarting the server and all other solutions from the web.

Vientiane