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

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

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

yarn install
yarn dev
same as before navigate to the first post
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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 15 (7 by maintainers)

Most upvoted comments

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.

Javi on Aug 26, 2020

@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

jasonwilliams on Aug 23, 2020

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

timneutkens on Aug 3, 2020