vercel / vercel/next.js

productionBrowserSourceMaps doesn't work with profiler

Open
#23,756 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

What version of Next.js are you using?

latest in package.json at time of submission - 10.1.3

What version of Node.js are you using?

14.16.0

What browser are you using?

chrome

What operating system are you using?

macOS

How are you deploying your application?

next build --profile; next start (local in prod mode)

Describe the Bug

Starting with npx create-next-app --example with-typescript with-typescript-app, I added:

module.exports = {
  productionBrowserSourceMaps: true,
}

to next.config.js, and I altered npm run build to run:

    "build": "next build --profile",

Then when I did a build and a start, the React Profiler doesn't show the proper names of the components:
image

Expected Behavior

In prod mode with --profile and productionSourceMaps, I expect profiler to show proper names of components:

image
To Reproduce

See above, I used with-typescript and altered two files.

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

Start with the with-typescript example, next.config.js, and the build script changed to run next build --profile. Reproduce with productionBrowserSourceMaps: true and next start, then inspect the React Profiler output in Chrome. Done means production profiling shows the proper component names, matching the expected screenshot.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.