productionBrowserSourceMaps doesn't work with profiler

Why this is a good first issue

Profiler component names not showing correctly with productionBrowserSourceMaps enabled.

AI Summary

The issue involves incorrect component name display in React Profiler when productionBrowserSourceMaps is enabled. This appears to be a source map processing issue during production builds with profiling enabled. The problem is reproducible but requires understanding of both Next.js build process and React's profiling internals.

Issue 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:

Expected Behavior

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

To Reproduce

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

GitHub Labels

bug