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

Answer 1

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

Answer 2

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";
}

Answer 3

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.