WebSocket is closed before the connection is established

foxhound87 commented 1 year ago

Verify canary release

[X] 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 commented 1 year ago

0053) [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 commented 1 year ago

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

nextjs@0.1.0 /path/to/my/project ├── @fortawesome/fontawesome-svg-core@6.4.0 ├── @fortawesome/free-brands-svg-icons@6.4.0 ├── @fortawesome/free-regular-svg-icons@6.4.0 ├── @fortawesome/free-solid-svg-icons@6.4.0 ├── @fortawesome/react-fontawesome@0.2.0 ├── @types/adm-zip@0.5.0 ├── @types/archiver@5.3.2 ├── @types/dompurify@3.0.2 ├── @types/formidable@2.0.6 ├── @types/jsdom@21.1.1 ├── @types/multer@1.4.7 ├── @types/multiparty@0.0.33 ├── @types/node@20.3.0 ├── @types/react@18.2.11 ├── axios@1.4.0 ├── body-parser@1.20.2 ├── classnames@2.3.2 ├── deepslate@0.17.5 ├── dotenv@16.1.4 ├── error-overlay-webpack-plugin@1.1.1 ├── eslint-config-next@13.4.5 ├── eslint-plugin-react@7.32.2 ├── eslint@8.42.0 ├── express@4.18.2 ├── formidable@2.1.1 ├── fs@0.0.2 ├── got@13.0.0 ├── isomorphic-unfetch@4.0.2 ├── jszip@3.10.1 ├── next.js@1.0.3 ├── next@13.4.5 ├── node-fetch@3.3.1 ├── npm-check@6.0.1 ├── octokit@2.0.19 ├── puppeteer-core@20.5.0 ├── react-dom@18.2.0 ├── react-youtube@10.1.0 ├── react@18.2.0 ├── styled-components@5.3.11 ├── tsc-node@0.0.3 ├── webpack@5.86.0 └── xss@1.0.14

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: #34342, #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 commented 1 year ago

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 commented 1 year ago

I think this is related to this pull request https://github.com/vercel/next.js/pull/49805

artitudinale1 commented 1 year ago

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 commented 1 year ago

I'm having the same issue with the development server on next@13.4.9

sinapirani commented 1 year ago

same

tzelon-cypator commented 1 year ago

I have the same issue, downgrading to next@13.0.4 works. I have app and pages directories.

meotimdihia commented 10 months ago

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

vercel / next.js