DebugEngine/css-to-js-sourcemap throws lots of errors with latest nextjs (react fast refresh?)

[grrowl]

We have a pretty big project using styletron, which uses css-to-js-sourcemap. It's built on nextjs 9.4.2, which uses webpack 4.

The worker throws hundreds of these errors which understandably makes the console a mess and the debugging tools quite difficult to use. The fetch errors are thrown by styletron-react's use of the css-in-js-worker library as noted by this comment rtsao/css-to-js-sourcemap#41 (comment)

For now, avoiding using of DebugEngine is the best solution for this problem.

[rtsao]

Thanks for the report. I think this must be something different from rtsao/css-to-js-sourcemap#41 (comment) since it gets past the TypeError and actually attempts to fetch these URLs.

I'm thinking is this is related to how Next.js is producing source maps. css-to-js-sourcemap should only be fetching the actual JS bundles (not the fake URLs supplied by webpack).

I assume this is minimally reproducible with a simple app using Next.js and baseui?

[jgillich]

I'm also getting this in a Next.js app so you could be on to something there. It does reproduce with a very simple app: https://github.com/tajo/nextjs-baseweb

[rtsao]

Hmm, I just tried reproducing with that repo by editing some files but no luck seeing any errors. Any particular reproduction steps that work for you?

[jgillich]

Sorry my bad, try this one: https://github.com/jgillich/nextjs-baseweb

The only difference is the use of toaster and ToasterContainer. Maybe we have yet another issue with toaster here? https://github.com/uber/baseweb/issues/3430

[jgillich]

Actually no, what triggered this was the dependency version upgrade. Upgrade everything in tajo/nextjs-baseweb with a tool like npm-check-updates and you should be able to reproduce.

[rtsao]

Thanks, I can reproduce now.

It seems something changed with stack trace URLs between next@9.4.4 and next@9.3.2:

Logging out stack from https://github.com/styletron/styletron/blob/master/packages/styletron-react/src/dev-tool.js#L5 yields

Next 9.3.2:

Error: stacktrace source
    at addDebugMetadata (http://localhost:3000/_next/static/development/pages/_app.js?ts=1593124000254:11966:14)
    at styled (http://localhost:3000/_next/static/development/pages/_app.js?ts=1593124000254:12251:7)
    at Module../node_modules/baseui/esm/button/styled-components.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124000254:525:81)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124000254:792:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124000254:151:20)
    at Module../node_modules/baseui/esm/button/button.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124000254:235:79)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124000254:792:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124000254:151:20)
    at Module../node_modules/baseui/esm/button/index.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124000254:462:68)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124000254:792:31)

Next 9.4.4:

Error: stacktrace source
    at addDebugMetadata (webpack-internal:///./node_modules/styletron-react/dist/browser.es5.es.js:34:14)
    at styled (webpack-internal:///./node_modules/styletron-react/dist/browser.es5.es.js:326:7)
    at eval (webpack-internal:///./node_modules/baseui/esm/button/styled-components.js:23:81)
    at Module../node_modules/baseui/esm/button/styled-components.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124095042:155:1)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:863:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:151:20)
    at eval (webpack-internal:///./node_modules/baseui/esm/button/button.js:4:79)
    at Module../node_modules/baseui/esm/button/button.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124095042:107:1)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:863:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:151:20)
    at eval (webpack-internal:///./node_modules/baseui/esm/button/index.js:2:68)
    at Module../node_modules/baseui/esm/button/index.js (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124095042:143:1)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:863:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:151:20)
    at Module.eval (webpack-internal:///./src/pages/index.tsx:6:71)
    at eval (webpack-internal:///./src/pages/index.tsx:137:30)
    at Module../src/pages/index.tsx (http://localhost:3000/_next/static/development/pages/index.js?ts=1593124095042:1085:1)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:863:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1593124095042:151:20)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F&absolutePagePath=%2FUsers%2Frtsao%2FCode%2Fnextjs-baseweb%2Fsrc%2Fpages%2Findex.tsx!./:5:16)
    at register (webpack-internal:///./node_modules/next/dist/client/page-loader.js:278:21)
    at PageLoader.registerPage (webpack-internal:///./node_modules/next/dist/client/page-loader.js:315:7)
    at register (webpack-internal:///./node_modules/next/dist/client/index.js:129:21)
    at eval (webpack-internal:///./node_modules/next/dist/client/index.js:137:14)

The key difference is the URLs have been changed from http://localhost:3000/_next/static to webpack-internal://.

The quick fix would be to simply ignore any URLs with non http(s) protocol, which would solve the errors but the DevTool would still not work because it needs to be able to fetch the source maps for the original source.

I still need to look further into why this is now different and if there's anything we can do from our end.

[tajo]

They started using eval-source-map for server side errors in this PR for performance reasons. You can fix things by adding next.config.js into your project and override their new defaults:

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

I'm probably just going to update our examples and will report it to them but not sure if they are willing to revert it for 9.x releases.

I already updated tajo/nextjs-baseweb.

[matchatype]

The fix worked well up to nextjs v9.4.4 but with v9.5.0 changes to webpack devtool in development are reverted:

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

[jonsadka]

Bumping this for visibility.

Looks like the issue is back even with config.devtool = 'inline-source-map'. You can actually get huge cpu spikes and page crashes from this when rendering 400ish rows in the data-table component

[tajo]

Yea, unfortunately this is still a problem with Next.js (including v10). They changed the source map format and don't allow any customization.

As @rtsao described that's not compatible with the current approach using worker and fetching source code. Frankly, I am not sure if there's a fix we could make. This feature is nice to have but not absolutely critical? Afaik some CSS in JS libraries like styled-components don't have it, others use build time solutions using babel. Maybe we could do something like that?

Anyway, Ryan might have some better ideas. For now, I am going to remove DebugEngine from all Next.js examples/templates and add a disclaimer that certain source map format is expected.

[jonsadka]

Gotcha, thanks for the quick response @tajo