Debugging Redux with NextJS -- breakpoints not getting hit...

I feel like I've been here before, so apologies if this has been asked and answered, but I did a search through the forum for 'NextJS' questions and didn't see mine.

I have a NextJS project where I need to run a custom script (to download a GraphQL schema) before launch.  I want to debug some Redux actions, but when I click on the breakpoint bar on the left in the WS code the breakpoint symbols remain red, never turning green, and the breakpoints are never hit.

I set up two debug configs -- NodeJS and Javascript Debug -- and combined them into a compound debug config.



I tried adding my browser to the tab "Browser/Live Edit" in the Node config, but that didn't do anything, so I set up the compound debug config.

In the Node config I'm runing the script 'dev' in 'package.json'

"scripts": {
"dev": "npm-run-all -s build-fragment startserver",
"startserver": "next -p 8080",
"build": "next build",
"start": "next start",
"build-fragment": "node src/schemaQuery.js"

When I run the compound debug config, the server starts, the browser opens, first with "Can't find the site" screen but then, after I reload, the correct page.  However, no debug points are hit.

Where am I going wrong?

Comment actions Permalink

First, you Node.js run configuration never starts because of the Before launch step:  a process added to Before launch has to return an exit code, the main process is waiting for its exit code to start and thus doesn't start until the first process terminates. This is the way Before launch is designed - it's supposed to be used to run some sort of pre-processing before running the main process. But

npm-run-all -s  build-fragment startserver

doesn't exit, it starts the server your application is hosted on, and it has to be running to make your application work. Please remove your npm script from Before launch, start it separately


Before trying Compound configuration, make sure that everything works when starting the configurations one by one. Also, you need to know if the code you are going to debug is executed on server or client end (not always obvious with Next.js) and use the corresponding configurations

Comment actions Permalink

Starting the server separately, adding the browser to the NodeJS config and taking out the 'before run' script seems to work.  I say 'seems' because it does work, but, as you said, it seems unclear whether things are running in client or server at times, so I'm prepared for it to fail.  For now, it's working, thanks


Comment actions Permalink

One odd thing is that I keep having to remove and add the breakpoints for them to 'turn green' and be respected.



Please sign in to leave a comment.