Ability to override webpack devtool in development mode for detailed sourcemaps

[suryarajendhran]

Describe the feature you'd like to request

Next allows a custom webpack devtool for production but in development, it reverts any custom devtool to eval-source-map. It would be great if there is a way to override the default devtool in development mode to allow for more detailed modes such as source-map.

Describe the solution you'd like

Overrides to webpack.devtool will be ignored in development mode as per the documentation. I think it would be great if this override by next was removed.

Describe alternatives you've considered

With Next 12, using zeit/next-source-maps became deprecated and overriding devtool in next.config.js doesn't seem to work. And I couldn't find other alternatives solution after a fairly exhaustive search of the web and the documentation.

[thibautsabot]

Hello!

I might be wrong, but I doubt that this is a feature that will be implemented.
I believe that the Next.js team likes to have strong default configuration values and only allow customisation if it's a very popular demand.

For your use-case, I can suggest using something like https://www.npmjs.com/package/patch-package to comment out the code responsible for the "reverting" of the config.

You could comment these 3 lines of code: https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L1762 and then use the config that you want.

For example with Next 12.1.0, it creates the following patches/next+12.1.0.patch file containing:

diff --git a/node_modules/next/dist/build/webpack-config.js b/node_modules/next/dist/build/webpack-config.js
index d6a492b..4def9c0 100644
--- a/node_modules/next/dist/build/webpack-config.js
+++ b/node_modules/next/dist/build/webpack-config.js
@@ -1421,10 +1421,10 @@ async function getBaseWebpackConfig(dir, { buildId , config , dev =false , isSer
         if (!webpackConfig) {
             throw new Error(`Webpack config is undefined. You may have forgot to return properly from within the "webpack" method of your ${config.configFileName}.\n` + 'See more info here https://nextjs.org/docs/messages/undefined-webpack-config');
         }
-        if (dev && originalDevtool !== webpackConfig.devtool) {
-            webpackConfig.devtool = originalDevtool;
-            devtoolRevertWarning(originalDevtool);
-        }
+        // if (dev && originalDevtool !== webpackConfig.devtool) {
+        //     webpackConfig.devtool = originalDevtool;
+        //     devtoolRevertWarning(originalDevtool);
+        // }
         // eslint-disable-next-line no-shadow
         const webpack5Config = webpackConfig;
         // disable lazy compilation of entries as next.js has it's own method here

[microhobby]

@thibautsabot thanks to share this man!!

[jordaaash]

Posted a workaround here: #21425 (comment)

Use Object.defineProperty with a noop setter to make it stick.

[Sollace]

Yes please. I'd like to be able to make my own choices and the "optimal" choice the Next.js team chooses (eval) produces unintelligible garbage.