Allow changing devtool webpack config in development.

[ryandagg]

Describe the feature you'd like to request

Change the functionality that leads to this terminal output:

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.

There are many uses for various webpack devtool configurations outside of "eval-source-map" and having the option to change them without Next overriding an explicit configuration choice would be greatly appreciated.
Specifically, the eval option allows for an incredible amount of additional information when setting breakpoints in a browser's developer tools.

I understand the possibility of "severe performance regressions", but I think a warning (maybe a louder warning) is sufficient.

Describe the solution you'd like

Do not override the devtool webpack setting in development when explicitly configured.

Describe alternatives you've considered

Continuing with Next and accept a vastly less efficient debugging workflow.

[tushar-singh]

had a teammate complain about build speeds in development and I was surprised to find the devtool is reverted by next

I ended up patching nextjs package (using yarn patch protocol) with the following line commented in webpack-config.js:

webpackConfig.devtool=originalDevtool;devtoolRevertWarning(originalDevtool);

then in next.config.js we set devtool from env:

webpack: (config, { dev }) => {
        if (dev) {
            // set DEVTOOL in .env.local (e.g. "DEVTOOL=eval-cheap-source-map")
            // more options here: https://webpack.js.org/configuration/devtool/
            config.devtool = process.env.DEVTOOL || 'eval-source-map';
        }

[aidev42]

Tried this, but commenting out those lines in webpack-config.js seems to quietly break something, the app no longer renders at all though no errors. Did you find some way to disable devtools in dev environment?

[jordaaash]

Workaround:

export default {
    webpack(config) {
        Object.defineProperty(config, 'devtool', {
            get() {
                return 'source-map';
            },
            set() {},
        });
        return config;
    },
};

You'll still see Warning: Reverting webpack devtool to 'eval-source-map'. in the console, but the devtool you specify in the getter will be used.

[ivanvaccari]

Nice trick, a bit dodgy but i like it.