[Solved] webpack options has an unknown property 'hotOnly'. Invalid options object. Dev Server has been initialized using an options object

Problem:

In React Js application when using npx webpack-dev-server --mode development command it's showing an error saying,

[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 'hotOnly'. These properties are valid:

Solution:

devServer|Webpack config is related to webpack-dev-server. This migration instruction should be used if your webpack is utilizing webpack-dev-server version 4.

In version 3 it will be

devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "https://localhost:3000/dist/",
    hotOnly: true,
},

In version 4 it will be

devServer: {
    // contentBase
    static : {
      directory : path.join(__dirname, "public/")
    },
    port: 3000,
    // publicPath
    devMiddleware:{
       publicPath: "https://localhost:3000/dist/",
    }
    // hotOnly
    hot: "only", // hot:true
},

When you have hot: true in the current versions, the HotModuleReplacementPlugin plugin is automatically applied, thus make sure you don't have HotModuleReplacementPlugin in your plugins if you have hot: true/hot: "only." If you have the previous versions, you will receive a warning as " [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it explicitly to your webpack setup."

plugins: [new webpack.HotModuleReplacementPlugin()], 

If you are getting error "static heartbeatInterval = 1000; SyntaxError: Unexpected token =", make sure to use the node version is >= 12.13.0 as per the guide here.

If everything is done, you should be able to see an output as preceding when you run npx webpack-dev-server --mode development.

Thank you for reading the article. If you have any suggestions please comment below.