I have installed a project using create-next-app. I need to debug the server side rendering using my editor: vscode. So i have visited vscode-recipes - how to debug next.js app.
I have made a slight change to the recipe so I won't have to install Next
globally.
that's my launch.json
config file:
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
"runtimeArgs": ["-inspect"],
"port": 9229,
"console": "integratedTerminal"
}
While i'm running it I get the following error:
Error: Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next dev
I'm trying to change runtimeArgs
to following command that should work:
"runtimeArgs": ["NODE_OPTIONS=--inspect"]
and I am getting other error:
No such directory exists as the project root: /Users/username/with-redux-thunk-app/NODE_OPTIONS=--inspect
How I can I correctly express "NODE_OPTIONS=--inspect"
so it works with vscode debugger?
I managed to debug it without any additional arguments, my config:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/node_modules/next/dist/bin/next"
}
]
}
Potential pitfalls:
If your next project is in subfolder in your vscode workspace, you should set sourceMapPathOverrides
.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Example",
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
"port": 9229,
"cwd": "${workspaceFolder}/subfolder",
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/subfolder/*",
}
}
]
}
source
You may also need a different type of source map, alter your next.config.js.
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map';
return config;
}
};
Also, Starting in version 9.3.1, do not add the --inspect flag in any configuration - it is passed automatically through the next command.
source with lots of info on topic.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With