Inaccurate sourcemaps for sources under node_modules
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #85~20.04.1-Ubuntu SMP Mon Jul 17 09:42:39 UTC 2023
Binaries:
Node: 18.16.0
npm: 9.5.1
Yarn: 1.22.18
pnpm: 8.6.7
Relevant Packages:
next: 13.4.12
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: N/A
Next.js Config:
output: N/A
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue or a replay of the bug
https://github.com/replayio/nextjs-inaccurate-sourcemaps
To Reproduce
npm run build- upload
.next/static/chunks/main-26f0defd1fe4aedb.js[.map]to https://evanw.github.io/source-map-visualization/ - select
webpack://_N_E/node_modules/@swc/helpers/esm/_interop_require_wildcard.jsas the original source - for comparison, upload
.next/static/chunks/pages/_app-27374a655d3a2ebe.js[.map]to https://evanw.github.io/source-map-visualization/ and selectwebpack://_N_E/src/_interop_require_wildcard.js
Alternatively, you can look at these sourcemaps here:
webpack://_N_E/node_modules/@swc/helpers/esm/_interop_require_wildcard.js: https://app.replay.io/recording/5072126e-507f-43d9-8c9e-889ad2bfd0dd/sourcemap/o4-80-c194bb-ec5646webpack://_N_E/src/_interop_require_wildcard.js: https://app.replay.io/recording/5072126e-507f-43d9-8c9e-889ad2bfd0dd/sourcemap/o6-6-c194bb-5d30d7
Describe the Bug
I've noticed that the sourcemaps produced by Next.js are inaccurate for some sources, making it impossible for debuggers to show scopes with original (rather than generated) variable names.
This seems to be the case for all sources under node_modules.
To reproduce the problem I've used create-next-app to create an app and copied node_modules/@swc/helpers/esm/_interop_require_wildcard.js to src/_interop_require_wildcard.js. This is what a sourcemap visualizer shows for these two copies of the same source:
node_modules/@swc/helpers/esm/_interop_require_wildcard.js:
src/_interop_require_wildcard.js:
Expected Behavior
Sourcemaps for sources under node_modules should be accurate.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and run npm run build. Compare the sourcemaps for .next/static/chunks/main-26f0defd1fe4aedb.js and pages/_app-27374a655d3a2ebe.js, focusing on the node_modules/@swc/helpers/esm/_interop_require_wildcard.js and src/_interop_require_wildcard.js sources. Done means sources under node_modules produce accurate mappings like the copied source.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js
- Domain
- build-system, devtools
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100