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

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]

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

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