Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade next from 13.4.3 to 13.4.4 startup crash, because of websocket error in dev mode due to NODE_OPTIONS='--inspect' #50489

Closed
1 task done
julianklumpers opened this issue May 29, 2023 · 20 comments · Fixed by #51467 or #65006
Labels
bug Issue was opened via the bug report template. locked

Comments

@julianklumpers
Copy link

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.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 19.6.0
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: 8.4.0
    Relevant packages:
      next: 13.4.5-canary.0
      eslint-config-next: 13.4.4
      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

https://github.com/julianklumpers/reproduction-app

To Reproduce

  • yarn dev
  • npm run dev
  • pnpm dev

Describe the Bug

In the release log of 13.4.4 is a commit that says NODE_OPTIONS='--inspect' is fixed, see:

Passing NODE_OPTIONS='--inspect' causes a websocket error and the app cannot start.

Expected Behavior

Running dev with NODE_OPTIONS='--inspect' starts the app without websocket error and inspect mode works correctly.

Which browser are you using? (if relevant)

Google Chrome Version 113.0.5672.92

How are you deploying your application? (if relevant)

Digital Ocean

@julianklumpers julianklumpers added the bug Issue was opened via the bug report template. label May 29, 2023
@julianklumpers julianklumpers changed the title Upgrade next from 13.4.3 to 13.4.4 causes websocket error in dev mode duo to NODE_OPTIONS='--inspect' Upgrade next from 13.4.3 to 13.4.4 causes websocket error in dev mode due to NODE_OPTIONS='--inspect' May 29, 2023
@julianklumpers julianklumpers changed the title Upgrade next from 13.4.3 to 13.4.4 causes websocket error in dev mode due to NODE_OPTIONS='--inspect' Upgrade next from 13.4.3 to 13.4.4 startup crash, because of websocket error in dev mode due to NODE_OPTIONS='--inspect' May 29, 2023
@gusfune
Copy link

gusfune commented May 29, 2023

I can confirm I could replicate, was just a matter of passing NODE_OPTIONS='--inspect' to my startup script.

@AnandChowdhary
Copy link

Could be related, but I'm seeing this after upgrading from 13.4.3 to 13.4.4:

- error uncaughtException: TypeError: Cannot read properties of undefined (reading 'length')
    at WasmHash._updateWithBuffer (/Users/anandchowdhary/Projects/1q/node_modules/.pnpm/next@13.4.4_@babel+core@7.22.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:1352524)
    at WasmHash.update (/Users/anandchowdhary/Projects/1q/node_modules/.pnpm/next@13.4.4_@babel+core@7.22.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:1351859)
    at BatchedHash.update (/Users/anandchowdhary/Projects/1q/node_modules/.pnpm/next@13.4.4_@babel+core@7.22.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:1348216)
    at /Users/anandchowdhary/Projects/1q/node_modules/.pnpm/next@13.4.4_@babel+core@7.22.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:292480
    at processQueue (/Users/anandchowdhary/Projects/1q/node_modules/.pnpm/next@13.4.4_@babel+core@7.22.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:1365665)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

@stevejcox
Copy link

Seeing this WasmHash error too. Has come and gone in previous versions, but is back again.

@monowai
Copy link

monowai commented Jun 3, 2023

I'm starting with NODE_OPTIONS='--inspect' next dev and still see the error as at 13.4.4 when I navigate to http://localhost:3000 - WebSockets request was expected

Debugger listening on ws://127.0.0.1:9229/fedf6935-9af5-42cf-bfc4-3914287169bf
...
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Debugger listening on ws://127.0.0.1:62395/f269290f-eb18-45bc-93cf-f528594a995d

Connecting my node debugger to 9229, logs this message:
- ready started server on 0.0.0.0:3000, url: http://localhost:3000

Looks like maybe websockets are expected for both ports - 9229 and 62395?

@VanTanev
Copy link

VanTanev commented Jun 6, 2023

Can confirm, we're seeing the same error on MacOS when running NODE_OPTIONS='--inspect' next dev -p 3000

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: N/A
      pnpm: 7.32.4
    Relevant packages:
      next: 13.4.5-canary.6
      eslint-config-next: 13.4.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

The error does not happen on Linux.

@manuelbarzi
Copy link

same error in my mac. i cannot inspect server-side code. the command NODE_OPTIONS='--inspect' next dev does not seem to work in the current version of next 13. any suggestions from the development team?

@hassanqureshi2
Copy link

Its working without NODE_OPTIONS

@Geminii
Copy link

Geminii commented Jun 16, 2023

Same problem in our company since we upgrade to 13.4.4 version 😭

@andresgutgon
Copy link

andresgutgon commented Jun 17, 2023

@Cow258 could be this related? #48019 I saw it was added on 13.4.4 downgrading to 13.4.3 made disappear this error

Sorry @julianklumpers 🙏 I did my own digging in git story and now I realized you already mentioned this in the issue description 😂

@semy
Copy link

semy commented Jun 17, 2023

Just upgrade to 13.4.5

@andresgutgon
Copy link

I was on 13.4.5 and was getting that error. Can you link to the commit or PR where this was fixed. For me was not working
image

@Cow258
Copy link
Contributor

Cow258 commented Jun 18, 2023

@andresgutgon
I don't think it related to #48019.
I actually encountered the same issue on latest v13.4.6.
Then i installed and tested on v13.4.4-canary.5 and it is working well.
Since 13.4.4-canary.5 is the version just released by #48019,
this version can prove to be unrelated to #48019
So the problem should occur after May 24th.

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.5.0
    Relevant packages:
      next: 13.4.4-canary.5
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4

@Cow258
Copy link
Contributor

Cow258 commented Jun 18, 2023

I can confirm this issue related to #50248
Tested vserions:
v13.4.4-canary.5 -> Good result
v13.4.4-canary.6 -> Good result
v13.4.4-canary.7 -> Error: WebSockets request was expected
image

@Cow258
Copy link
Contributor

Cow258 commented Jun 18, 2023

I think the conflict happens on debug port or HTTP port or IPC port

@Cow258
Copy link
Contributor

Cow258 commented Jun 18, 2023

I'm attempting to fix this issue
image

Cow258 added a commit to Cow258/next.js that referenced this issue Jun 18, 2023
Cow258 added a commit to Cow258/next.js that referenced this issue Jun 20, 2023
andresgutgon added a commit to andresgutgon/next.js that referenced this issue Jun 24, 2023
@kodiakhq kodiakhq bot closed this as completed in #51467 Jun 25, 2023
kodiakhq bot pushed a commit that referenced this issue Jun 25, 2023
## Fixing a bug

Fixes #50489
Fixes #48767
Fixes #45697

## What?
When running `NODE_OPTIONS='--inspect' next dev`
Then go to `http://localhost:3000/`
Will display error message `WebSockets request was expected` like the following screenshot
![image](https://github.com/vercel/next.js/assets/14261588/d2f3e520-7cce-40db-be69-99980804cc51)

Also the debug port for app and page still not follow by user input
When `NODE_OPTIONS='--inspect=8000' next dev` the app debug port still `54151`
![image](https://github.com/vercel/next.js/assets/14261588/e3d25c0e-9d00-4767-94d6-d954776912b2)


## Why?
#50248 added a function `getFreePort()` and it used on debug port and HTTP server port
So conflict happen between debug and HTTP port
Then show up error `WebSockets request was expected`

Here are some references about this error:
https://stackoverflow.com/questions/49766500/websockets-request-was-expected-error-when-using-inspect-brk-option


## How?
1. `getFreePort()` should only use on HTTP server
2. Added `getDebugPort()` for read the port from user input
3. Assign port to each worker
4. Add accurate info log for each debug port, e.g.: `proxy`,`router`,`app`,`page`

When `NODE_OPTIONS='--inspect' next dev` 
![image](https://github.com/vercel/next.js/assets/14261588/2260fdff-13fe-435a-9812-984315c0ea2e)

When `NODE_OPTIONS='--inspect=8000' next dev` 
![image](https://github.com/vercel/next.js/assets/14261588/de6e2f2d-9216-481f-b6db-7c5132e97b6f)

Also fix VSCode debugger
It is worth noting that
We can't hit the breakpoint on the first execution
because the file does not exist there yet or was not compiled
In most cases, the breakpoint can only be triggered normally during the second execution
![image](https://github.com/vercel/next.js/assets/14261588/dccded50-46c5-4b6d-beb7-ff0e5324327a)


Closes NEXT-1179
Closes NEXT-517



Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>
@cray2015
Copy link

despite this issue being fixed in 13.4.4. I still see this issue many times. The current workaround for me is to remove the NODE_OPTIONS='--inspect' flag
run the dev or start scripts without it after that it should run successfully. Once it runs you can stop the process re add the above flag and try to run it back the websocket error should be solved. I have tried this procedure 3-4 times and it has helped me to run the solution with the flag

@Cow258
Copy link
Contributor

Cow258 commented Jun 29, 2023

@cray2015 This issue should be fixed in the next release or above version v13.4.8-canary.3

@Geminii
Copy link

Geminii commented Jun 29, 2023

@Cow258 Thanks for the fix and information, really appreciate 🙏

@rodrigocastromartinez
Copy link

I've tested with next 13.4.10 and with 13.4.8-canary.3, and the inspector doesn't work yet. any updates on this?

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 15, 2023
timneutkens pushed a commit that referenced this issue Apr 25, 2024
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

### What?

Previously, parsing and managing the `NODE_OPTIONS` was performed using
a series of regular expressions. These were prone to bugs, and have
already caused a few issues. This moves us over to the standard
`parseArgs`
([docs](https://nodejs.org/docs/latest/api/util.html#utilparseargsconfig)):

```js
import { parseArgs } from "node:utils"
```

### Why?

This simplifies the argument parser dramatically, removing the need for
any special patterns or accommodations. No need to maintain all these
patterns when there's a lightweight built-in parser already available.

Fixes #53127
Fixes #53757
Fixes #47083
Fixes #50489
Closes #60919 
Closes #59410
Closes NEXT-3219
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet