Webpack Dev Server Config - contentBase not working

Question

I'm trying to setup a webpack dev server but for a reason, I'm running into an error.

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

I did install all the needed packages globally and tried some other suggestions but I cannot get it to work.

This is the config:

const path = require('path');

module.exports = {
    entry: './app/Main.js',
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, 'app'),
        filename: 'bundled.js',
    },
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'app'),
        hot: true,
        historyApiFallback: { index: 'index.html' },
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-react',
                            ['@babel/preset-env', { targets: { node: '12' } }],
                        ],
                    },
                },
            },
        ],
    },
};

My files:

enter image description here

Looking forward to ur answers! Thanks

Does this answer your question? Webpack Dev Server Config - contentBase not working in latest version — ggorlen
– ggorlen, Commented Apr 5, 2022 at 15:31

Źmicier Jaraševič · Accepted Answer · 2021-12-10 20:27:34Z

8

I can assume the error appeared after migration to the latest version of Webpack/DevServer, they did several breaking changes, including devServer settings. Especially for this issue try to use this code instead of contentBase:

  devServer: {
    static: {
      directory: path.resolve(__dirname, 'app'),
    },
   ...

Here is the whole migration guide that can help https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

edited Dec 10, 2021 at 20:27

answered Dec 10, 2021 at 20:15

Źmicier Jaraševič

3812 silver badges11 bronze badges

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

Comments

President Jam · Accepted Answer · 2023-08-22 13:07:08Z

0

Full code is here

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
require('babel-register')

module.exports = {
    entry: ['@babel/polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ],
    mode: 'development',
    devtool: 'inline-source-map',
        devServer: {
            static: {
              directory: path.resolve(__dirname, 'app'),
            },
        }
}

answered Aug 22, 2023 at 13:07

President Jam

1,3181 gold badge6 silver badges22 bronze badges

1 Comment

Nimantha Sep 1 at 7:59

Consider adding a couple of lines explaining the code.

Collectives™ on Stack Overflow

Webpack Dev Server Config - contentBase not working

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related