Production source maps show webpack-generated files rather than source files in 10.0.4

[kachkaev]

Bug report

Describe the bug

Looks like something is wrong with the productionBrowserSourceMaps option, which was moved out from experimental in v10.0.4 (#20267). Instead of displaying what developers have in the editor, they resolve into some intermedeate webpack output.

To Reproduce

1. Create an app

   npx create-next-app next-production-source-maps-mvp
   cd next-production-source-maps-mvp
   yarn why next
   ## => Found "[email protected]"

2. Enable productionBrowserSourceMaps (as suggested by docs)

   cat <<EOF >next.config.js
   module.exports = { productionBrowserSourceMaps: true }
   EOF

3. Build and start

   yarn build && yarn start

4. Open the browser and observe

   • Raw source (pointing to a source map as expected):
     

   • Source map (resolved and downloaded, but is not very helpful):
     

Expected behavior

I was expecting the source maps for yarn build && yarn start to look the same as for yarn dev:

Seeing jsx, original file paths and unchanged js / ts syntax is crucial for debugging.

System information

• OS: macOS 11
• Browser (if applies) Chrome / Firefox
• Version of Next.js: 10.0.4
• Version of Node.js: 14.15.3
• Deployment: local (also observed on vercel for njt.now.sh)

Additional context

Switching to @zeit/next-source-maps (which the new option is aiming to replace) gives the same incorrect result in Next 10.0.4. Here are the additional repro steps to observe this:

yarn add -D @zeit/next-source-maps

cat <<EOF >next.config.js
const withSourceMaps = require('@zeit/next-source-maps')
module.exports = withSourceMaps()
EOF

yarn build && yarn start

What helps is downgrading to Next 10.0.3 and either keeping @zeit/next-source-maps or setting the experimental option:

yarn add [email protected]

cat <<EOF >next.config.js
module.exports = { experimental: { productionBrowserSourceMaps: true } }
EOF

yarn build && yarn start

[kachkaev]

I tried walking through all canary versions between 10.0.3 and 10.0.4 after making next.config.js agnostic to #20267:

module.exports = { productionBrowserSourceMaps: true, experimental: { productionBrowserSourceMaps: true } }

Source maps work as in 10.0.3 up until [email protected], but then switch to the broken behaviour in [email protected]. Looking at the release notes for canary.5, can the bug be caused by #20089? It must have went under the radars because the source maps were not gone anywhere, they just changed content-wise.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.