[Bug] eval-source-maps are failing for dynamic routes and don't map properly

[jasonwilliams]

Bug report

Sourcemaps are not being generated properly from next.js

Describe the bug

Sourcemaps don't generate the correct sources path because it truncates dynamic paths (e.g [id])

To Reproduce

1. Clone next.js and go to https://github.com/vercel/next.js/tree/master/examples/dynamic-routing (master branch or 9.5)
2. install dependencies, then run yarn|npm run dev
3. go to localhost and click "first post"
4. Now go into the .next folder, server -> pages -> post -> [id].js
5. Search for /***/ "./pages/post/[id]/index.js":
6. Select the base64 content and run pbpaste | base64 -D on the command line
7. inspect the JSON output.

{"version":3,"sources":["webpack:///./pages/post//index.js?a773"]}

notice id has been truncated in the url.
This has broken debugging.

Now, still in the same folder (dynamic routing), change the next.js version in the package.json to 9.3.6

1. yarn install
2. yarn dev
3. same as before navigate to the first post
4. inspect static/development/pages/post/[id].js.map

{"version":3,"file":"static/development/pages/post/[id].js","sources":["webpack:///webpack/bootstrap","webpack:///external \"next/dist/next-server/lib/router-context.js\""]}

You can see file is set correctly.

It looks like there was a change between v9.3.6 and v9.4.0 which switches to eval source maps and that doesn't support dynamic routes.
The only change i can see however is an upgrade of the source-maps package.

Expected behaviour

Sourcemaps should have the proper dynamic routes on them so debugging can work

Related to: #14906
Regression from?: #8295

[timneutkens]

Seems like a bug in the way that webpack handles those source paths (replaces [id] and probably [name] as well) 👍

[Javi]

Want to chime in to add breakpoints work correctly on dynamic routes on v9.4.0, and start breaking on v9.4.1 and on. I've tried the latest version, and also Webpack 5 beta. So it does seem to be a regression of #8295

[jasonwilliams]

Seems like a bug in the way that webpack handles those source paths (replaces [id] and probably [name] as well) 👍

@timneutkens Ok interesting.
Is something you've raised upstream?

[timneutkens]

Is something you've raised upstream?

I haven't it's still something that can be investigated by contributors here.

[jasonwilliams]

@timneutkens would it be worth not forcing people to use eval until this is fixed? I understand it’s a little more optimised in some situations but I think that advantage is overshadowed by it not handling routes.

It essentially blocks anyone from debugging while that’s in place and will be a forced-downgrade for many.

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://err.sh/next.js/improper-devtool

[timneutkens]

@timneutkens would it be worth not forcing people to use eval until this is fixed? I understand it’s a little more optimised in some situations but I think that advantage is overshadowed by it not handling routes.

It essentially blocks anyone from debugging while that’s in place and will be a forced-downgrade for many.

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://err.sh/next.js/improper-devtool

It would take the equivalent amount of work to investigate this issue or make the change you're suggesting so I'd suggest investigating and fixing it.

[Javi]

I may be a bit of a drag but being able to debug is critical to our process, so I can't upgrade to 9.5 until this is fixed or has a workaround, yet the docs don't support old versions and I'm starting to run into signs in them saying to upgrade, which is getting frustrating. Has this been raised upstream? I want to try my hand at it.

[jasonwilliams]

@Javi i raised it here webpack/webpack#11456 feel free to chase it up

[jasonwilliams]

Hey @timneutkens
I've attempted to reproduce this issue using just webpack and taking next out of the equation. It doesn't happen with webpack directly so I'm not sure if this is an upstream issue.

See here: webpack/webpack#11456 (comment)

[timneutkens]

Given that Next.js configures webpack to create the sourcemaps and we don't have any custom plugins that change sourcemaps it's unlikely that it's an issue directly related to Next.js. Either way this still has to be looked into.

[tunesmith]

It sounds like a webpack@5 fix is in progress, hopefully will be made to webpack@4 too. Are there any other workarounds other than putting debugger: everywhere?

[Timer]

Fixed by webpack/webpack#11927

[matt-koevort]

Suggestions on how to use the fix in webpack@5?

Have followed the NextJS instructions to use webpack 5, and can confirm it is being used in next.config - but filenames are still encoded.

[jasonwilliams]

@matt-koevort instructions from here? #21679 (comment) or from the website?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.