Sourcemaps are inaccurate
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.5k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/vercel/next-app-router-playground
To Reproduce
- Install the latest canary version in https://github.com/vercel/next-app-router-playground project.
- Edit
next.config.tsto include sourcemaps using webpack:
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
experimental: {
inlineCss: true,
dynamicIO: true,
clientSegmentCache: true,
viewTransition: true,
prerenderEarlyExit: false,
routerBFCache: true,
},
webpack: (config) => {
config.devtool = 'source-map';
return config;
},
} satisfies NextConfig;
- Run
pnpm build - In
.next/server/app/contextyou will findpage.jsandpage.js.map - Use some kind of sourcemap resolver, I used https://evanw.github.io/source-map-visualization/
- On line 2, column 14664 you will see the parameter named
awhich should be resolved toproduct, but it doesn't resolve to a name (it almost points to the correct location in the sourcemap, but it doesn't have a name).
Current vs. Expected behavior
Most of the sourcemaps are correct, but in some cases looks like they are off a little and aren't resolving to the actual value.
In this case, the parameter should be resolved to product but it doesn't resolve to anything.
There are more cases on multiple projects I have tested on, and more scenarios other than parameters (functions, objects, etc). If it's needed I can provide more examples.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 18.20.2
npm: 10.5.0
Yarn: 1.22.22
pnpm: 10.11.0
Relevant Packages:
next: 15.4.0-canary.86 // Latest available version is detected (15.4.0-canary.86).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: 5.7.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
TypeScript
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
I tried also on version 14.0.0 and still had inaccurate sourcemaps, so it's not only the latest canary version
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
Reproduce this in the next-app-router-playground project using the next.config.ts webpack override and pnpm build. Inspect .next/server/app/context/page.js and page.js.map with a sourcemap resolver, focusing on the parameter shown at line 2, column 14664. Done means the generated map resolves that parameter to product and similar reported cases are addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, typescript, webpack
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100