v9.4.2 changes ssr devtool and breaks css-to-js-sourcemap

[tajo]

Bug report

Describe the bug

css-to-js-sourcemap expects certain format of the stack trace and relies on server side source maps. This got changed in 9.4.2 and this PR and broke Styletron's debug mode that uses css-to-js-sourcemap.

To Reproduce

This repo is a minimal example.

Expected behavior

Not throwing errors because of the different stack trace.

Additional context

It's easily fixable by overriding defaults through next.config.js:

module.exports = {
  webpack: (config, {dev}) => {
    if (dev) {
      config.devtool = 'inline-source-map';
    }
    return config;
  },
};

but since this was just a performance optimization you might want to consider reverting the change until the next major version. Anyway, I thought it should be reported.

EDIT:

v9.5 seems to break the only workaround:

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://err.sh/next.js/improper-devtool

[jasonwilliams]

I've also hit this issue with debugging javascript, switching to inline-source-map helped me too, thanks @tajo I think anyone else debugging next server side may fall into this problem.

When debugging it last week it looks like eval-source-map doesn't work properly for /[id].tsx urls and instead generates /.tsx. This causes the mapping to be a bit screwed up and fails entirely on urls which have the [] in them. I went through this with @connor4312 in the vscode-js-debug team, he may have a better explanation.

[jasonwilliams]

Steps to reproduce

• Checkout https://github.com/jasonwilliams/nextjs9-typescript-server-vscode-example (master branch will do)
• Open in VSCode
• Launch task "launch server"
• add a break point in pages index.tsx then go to localhost:3000 it should hit
• try adding a breakpoint in pages/items/[id].tsx, you'll notice it doesn't go red

Sourcemap sources (once parsing the base64 data) "sources": ["webpack:///./pages/items/.tsx?ace6"],

the [id] has been truncated. I've actually noticed this happen on inline-source-map to so im not sure where this fault is coming from

[jasonwilliams]

Looks like a possible regression of https://github.com/vercel/next.js/issues/8295

[tajo]

Well, 9.5 makes things worse and breaks our only workaround?

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://err.sh/next.js/improper-devtool

[jasonwilliams]

Because im not certain if our issues are exactly the same, i've made a more specific issue at https://github.com/vercel/next.js/issues/15823

[jasonwilliams]

My fix went into Webpack 5.5.0 so could you see if this issue still happens with that version?

[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.