Update webpack 4 to webpack 5 get error options has an unknown property 'inline'

Question

When I try to update from webpack 4 to webpack 5, I get an error.
Here is my new webpack.config:

const { merge } = require('webpack-merge');
const common = require("./webpack.common.js");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require('dotenv-webpack');

module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    watchOptions: {
        poll: true,
        ignored: '/node_modules/',
    },
    devServer: {
        contentBase: path.join(__dirname, "public"),
        inline: true,
        compress: true,
        port: 9000,
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public", "index.html"),
            fileName: path.join('.', 'build', 'index.html')
        }),
        new Dotenv({
            path: './.env', // Path to .env file (this is the default)
            safe: false // load .env.example (defaults to "false" which does not use dotenv-safe)
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    "presets": ["@babel/preset-env","@babel/preset-react"],
                    "plugins": [
                        ["import", {"libraryName": "antd", "libraryDirectory": "lib", "style": "css"}],
                        "@babel/plugin-proposal-class-properties"
                    ]
                }
            },
            {
                test: /\.html$/i,
                loader: 'html-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg|ico)$/i,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            }
        ]
    },
});

It works perfect with webpack 4, but with webpack 5 I dont know what error "inline" is. Here is error:

webpack-dev-server --config webpack.dev.js --progress

1% setup initialize[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 'inline'. 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?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

here is my package.json

"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0"

Stichous

Answer 1

It looks like the inline flag was removed from webpack-dev-server v4. From the migration guide, it is just gone

The inline (iframe live mode) option was removed without replacement.

so in your devServer object, just remove the inline: true parameter

Tachycardia

In case this helps anyone, if you get Cannot GET / you may need devServer: { static: { directory: path.resolve(__dirname, "") } } in the config, that isn't needed with --inline or devServer.inline — I don't know if this is related frankly, but it could've probably saved me an hour, so I'm throwing this out there. – Gnatcatcher