nextjs debuggingdoes not work

[meds]

I tried the config suggested and got the runtime error issue so I played around with the launch.json until I landed on:

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Next: Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "Next: Node", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next.cmd", "runtimeArgs": ["--inspect"], "port": 9229, "console": "integratedTerminal" } ], "compounds": [ { "name": "Next: Full", "configurations": ["Next: Node", "Next: Chrome"] } ] }

However when I try to run this I get a 'Cannot connect to runtime process' econnrefused 127.0.0.1:9229 - this is on a fresh run with no chrome running on the PC so not sure why this is happening.

Furthermore if I do a 'yarn dev' and connect via f5 breakpoints work fine until I refresh or change the code, the breakpoints still appear as red so clearly something is going wrong there.

[meds]

One thing I found which is very odd - this setting:

{
"type": "node",
"request": "launch",
"name": "Next: Node 2",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
"port": 9229,
"env": {
"NODE_OPTIONS": "--inspect"
},
"trace": true
}

Actually works with breakpoints hitting even on refresh.

HOWEVER hooks are totally broken on this, I get the error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

and I KNOW I'm using the hooks correctly, and the same code works fine hooks and all with yarn dev so I'm at a loss what's going on here...

edit: ok after hours of trying to work this out I found the above config worked with hooks + breakpoints if I added a console option:

    {
        "type": "node",
        "request": "launch",
        "name": "Next: Node 2",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
        "port": 9229,
        "env": {
            "NODE_OPTIONS": "--inspect"
        },
        "console": "integratedTerminal",
        "trace": true
    }

So without "console": "integratedTerminal" I was getting the hooks being improperly used error. As far as I can tell that shouldn't have such an impact to the build, is this a bug?

[cadamsdev]

Duplicate of #210, #80

[vvo]

Hey there, I created a PR on Next.js docs to have Next.js debugging working in either Chrome DevTools or VSCode, appreciate any feedback you have when trying it out on the PR: https://github.com/zeit/next.js/pull/10807/files?short_path=bfcc096#diff-bfcc096377efef455dd348d059704209

I choosed to only attach to the debugger from VSCode instead of trying to completely launch next from VSCode because in many occasions your Next.js application might be loaded by docker/overmind/foreman/heroku local... Let me know what you think!

[connor4312]

Updated the Next.js recipe.