Next.js: Still getting 'address already in use' using --inspect on typescript projects

Created on 11 Apr 2020  路  7Comments  路  Source: vercel/next.js

Bug report

When using NODE_OPTIONS='--inspect' next dev -p 1337 I'm still getting the error:
Starting inspector on 127.0.0.1:9229 failed: address already in use

Describe the bug

From what I understand, this bug should have been fixed as of https://github.com/zeit/next.js/pull/11041.

However, I still get the error:

npm run dev

> [email protected] dev 
> NODE_OPTIONS='--inspect' next dev -p 1337

Debugger listening on ws://127.0.0.1:9229/90c3d543-273f-492c-a8f6-bb3afd978e64
For help, see: https://nodejs.org/en/docs/inspector
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:1337 ...

Starting inspector on 127.0.0.1:9229 failed: address already in use

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Edit package.json's dev script:
 "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev -p 1337",
    ...
  },
  "dependencies": {
    "next": "9.3.4",
    ...
  },
  1. npm run dev or yarn dev
  2. See error
npm run dev

> [email protected] dev 
> NODE_OPTIONS='--inspect' next dev -p 1337

Debugger listening on ws://127.0.0.1:9229/90c3d543-273f-492c-a8f6-bb3afd978e64
For help, see: https://nodejs.org/en/docs/inspector
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:1337 ...

Starting inspector on 127.0.0.1:9229 failed: address already in use

Expected behavior

Do not see address already in use error

Screenshots

If applicable, add screenshots to help explain your problem.

System information

  • OS: macOS
  • Browser (if applies) [e.g. chrome, safari]
  • Version of Next.js: 9.3.4 (also tried on 9.3.5-canary.7)
  • Version of Node.js: 12.16.2

Most helpful comment

The conflicting port comes from fork-ts-checker-webpack-plugin which starts its childprocess with the same environment variables as the host process. I opened https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/pull/405 to get around this.
You can also use

NODE_OPTIONS='--inspect=0'

to assign a random port. You'll have to manually configure devtools with this port afterwards though.

edit:

_Looks like fork-ts-checker-webpack-plugin isn't used during next dev anymore, so this shouldn't be a problem anymore_

All 7 comments

could you give a link to a repo that doesn't work? I just tried this and it worked for me. Perhaps the address is really in use, can you check with netstat?

Had same issue, tried with 9.3.4 and 9.3.5-canary.7.

Ended up simply doing node --inspect node_modules/next/dist/bin/next dev which seems to do the trick for me

@ingoclaro I think this may have to do with typescript? I cloned down the with-typescript-app example

I did yarn create next-app --example with-typescript with-typescript-app and then changed the dev script to use NODE_OPTIONS='--inspect' and got the 9229 already in use error

Modified @PeoB's comment into:

"dev": "node --inspect ./node_modules/.bin/next dev -p 1337"

Can confirm this worked for me. No more 9229 already in use business

I am also having the warning in 9.3.5-canary.6
I am using typescript (I don't think it could be related)

Screenshot 2020-04-10 at 18 39 43

Here is my VSCODE debug config

{
    "type": "node",
    "request": "launch",
    "name": "Next: npm dev",
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
    "env": {
        "NODE_OPTIONS": "--inspect=9669"
    },
    "port": 9669,
    "console": "integratedTerminal"
},

The conflicting port comes from fork-ts-checker-webpack-plugin which starts its childprocess with the same environment variables as the host process. I opened https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/pull/405 to get around this.
You can also use

NODE_OPTIONS='--inspect=0'

to assign a random port. You'll have to manually configure devtools with this port afterwards though.

edit:

_Looks like fork-ts-checker-webpack-plugin isn't used during next dev anymore, so this shouldn't be a problem anymore_

Thanks @Janpot , making the change in your TypeStrong/fork-ts-checker-webpack-plugin#405 PR fixed it for me!

Used the Typescript template.

Was this page helpful?
0 / 5 - 0 ratings