onfiguration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"

Question

I am migrating webpack 4 to webpack 5.

config/webpack.js has:

`devtool: isProduction ? 'hidden-source-map' : 'cheap-module-eval-source-map'

after migration got error:

onfiguration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".

It looks like the new webpack don't like conditions, because if I change to:

devtool: 'hidden-source-map'

error is gone.

Answer 1

problem was with cheap-module-eval-source-map -> eval-cheap-module-source-map according by https://webpack.js.org/configuration/devtool/

Answer 2

Webpack V5 expects a certain pattern when validating devtool name, failing to match the pattern mixing up the sequence of devtool string can cause error. The pattern is: [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

So for example, one of the following options can be used in webpack configuration file that are in Development phase - devtool: 'eval' devtool: 'eval-source-map' devtool: 'eval-cheap-source-map' devtool: 'eval-cheap-module-source-map'

These changes are new and thus when using an old configuration file such error can pop up. Reset the devtool value to the matching pattern and the error will go away. To learn more about devtool values suitable for your work visit Webpack Devtool Documentation