Next.js: Debugging doesn't work with dynamic routing

[borekb]

Bug report

Describe the bug

Debugging works fine with pages like pages/about.js but not with dynamic ones like pages/post/[id].js.

To Reproduce

1. Clone https://github.com/zeit/next.js/tree/master/examples/dynamic-routing
2. In VSCode or other editor that supports Node debugging, set a breakpoint in pages/index.js, somewhere in the render method.
3. Set a similar breakpoint in pages/post/[id]/index.js.
4. Start the app with NODE_OPTIONS="--inspect" next.
5. Open http://localhost:3000 and observe the first breakpoint is hit.
6. Navigate to one of the posts, e.g., http://localhost:3000/post/first, refresh the page fully (this is necessary to trigger server-side rendering) and observe that the other breakpoint is not hit.

UPDATE: This sample repo contains VSCode launch config: https://github.com/borekb/nextjs-issue-8295-demo.

Expected behavior

Both breakpoints should be hit.

Screenshots

System information

• OS: macOS
• Version of Next.js: 9.0.3

Additional context

I tried creating custom _app.js and breakpoints work fine there too. I only seem to have problems with dynamic routes – is it possible that the sourcemaps are somehow incorrect?

[borekb]

It's likely a problem with sourcemaps:

[borekb]

Another small piece, this time from Chrome's console:

In sources:

The file should be pages/post/[id].js.

[jvieirar]

Same for me, could we get an answer, please?
After adding the breakpoints on the Chrome's source tab, I'm able to debug the client-side code, but not the server-side (in getInitialProps)

[willwill96]

Anyone have a working solution to this? Putting debugger statements for every breakpoint is pretty annoying

[jasonwilliams]

@willwill96 it was re-raised here https://github.com/vercel/next.js/issues/15823