WebSocket is closed before the connection is established

[foxhound87]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.19.1
      npm: 8.19.3
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

/

To Reproduce

Configure a websocket connection in nextjs.

Describe the Bug

Console log report:

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

Expected Behavior

websocket should work as expected

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[daneseuwu]

[UpdateServer]: error sending to WebSocket: IO error: An established connection was aborted by the software in your host machine. (os error 10053): An established connection was aborted by the software in your host machine. (os error 10053)

[catter1]

Can confirm, am getting the same issue. This started after I updated Next.js (and a bunch of other packages) from 13.2.4 to 13.4.5. Comparing to OP, here's my relevent information:

Operating System/etc:
   Platform: Ubuntu
   Arch: x86_64
   Version: 22.04.2 LTS
   Browser: Ungoogled Chromium
Binaries:
   Node: 18.13.0
   npm: 9.7.1
   Yarn: N/A
   pnpm: N/A
Relevant packages:
   next: 13.4.5
   eslint-config-next: 13.4.5
   react: 18.2.0
   react-dom: 18.2.0
   typescript: 5.1.3

All Packages

[email protected] /path/to/my/project
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Notes

• I am not using WebSocket directly in any way in my code.
• This is being ran as development on my personal machine. No custom server.
• It appears to be blocking calls from my server to the client? Not entirely sure if it's related yet, but I discovered this issue by trying to troubleshoot the API.
• This error occurs on every single page on my site.

Things I have tried

• Restarting my machine
• Looked at other issues, but could not find anything that worked or applied to my scenario (ex: WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: init @ websocket.js?a9be:46 #34342, WebSocket connection failed errors after upgrade to Next.js 12 #30491)
• Various StackOverflow articles (most had the same information as the issues linked above)
• Updating webpack and the next.config.js file (as shown below)

• ...
  webpack(config, { dev, isServer }) {
   if (dev && !isServer) {
     config.output.hotUpdateMainFilename = 'static/webpack/[fullhash].[runtime].hot-update.json';
     config.output.hotUpdateChunkFilename = 'static/webpack/[id].[fullhash].[runtime].hot-update.js';
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
   }
   return config
  }
  ...

As I am somewhat new to Next.js, I am not sure what other information from my project would be of use. Please let me know, and I will provide it. Thank you for your time, I hope this either gets resolved or a solution is found.

[pkhodaveissi]

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

We had pages directory and now we have introduced app directory routing with this structure:

[mortyccp]

I think this is related to this pull request #49805

[artitudinale1]

The PR has been merged but I'm still having this issue, seems on Window OS but not in Ubuntu, is there any fix?

[tomchentw]

I'm having the same issue with the development server on [email protected]

[tzelon-cypator]

I have the same issue, downgrading to [email protected] works.
I have app and pages directories.

[meotimdihia]

If you are using nginx, you need to add this configuration:
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";
}