Websocket host/port for HMR uses the window.location variables instead of actual configured values in the server

[phuongnq]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #86-Ubuntu SMP Mon Jul 10 16:07:21 UTC 2023
    Binaries:
      Node: 18.17.1
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.17-canary.1
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

CLI (create-next-app)

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

https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts#L13

To Reproduce

1. Create a new NextJs app in port 3000
2. Run a web proxy in port 8080 which forwards the HTTP requests to 3000
3. Open http://localhost:8080 and verify that the NextJS app is displayed
4. Edit a page or component in the NextJS app and notice that the HMR does not reflect the change in http://localhost:8080

Describe the Bug

When a NextJS app is under an HTTP proxy, the WebSocket connection is not established since the client code looks for the connection with port window.location.port instead of the WebSocket configured port.

For example, I have a web proxy in http://localhost:8080 to forward the connection to http://localhost:3000.
NextJS run in http://localhost:3000.
In this case, the WebSocket client connects with URL: ws://localhost:8080/ but it should be ws://localhost:3000/
https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts#L13

Expected Behavior

Please use the configured host/port to establish the WebSocket connection instead of using window.location variables.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

yarn dev

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!