vercel / vercel/next.js

Sourcemaps are inaccurate

Open
#80,720 0 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

linear: next TypeScript
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
  1. Install the latest canary version in https://github.com/vercel/next-app-router-playground project.
  2. Edit next.config.ts to 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;
  1. Run pnpm build
  2. In .next/server/app/context you will find page.js and page.js.map
  3. Use some kind of sourcemap resolver, I used https://evanw.github.io/source-map-visualization/
  4. On line 2, column 14664 you will see the parameter named a which should be resolved to product, 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).
Image
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

NEXT-4613

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.