Webpack configuration error on "devtool: 'source-map',"

Question

I am trying text book react application following this tutorial. However, when I run the command sh -c webpack --watch -d --output ./target/classes/static/built/bundle.js (npm run-script watch as mentioned in the tutorial) I am getting the following error.

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

My webpack.config.js is as follows.

let path = require('path');

module.exports = {
    entry: './src/main/js/App.js',
    devtool: 'source-map',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
};

Any idea where is the issue?

I am using Webpack 5.29.0.

Jayanga Kaushalya · Accepted Answer · 2021-04-01 20:07:56Z

6

webpack --watch -d --output ./target/classes/static/built/bundle.js Here -d means the devtool option and it overrides the option that is given in the file. In webpack 5, you can't pass empty to devtool.

That was the issue.

answered Apr 1, 2021 at 20:07

Jayanga Kaushalya

2,7646 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack configuration error on "devtool: 'source-map',"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related