webpack options has an unknown property 'hotOnly'. Invalid options object. Dev Server has been initialized using an options object
Solution 1
It seems like the updated version of webpack
doesn't support the property hotOnly
, we should use the option hot
instead. You can see a GitHub issue associated with this here.
devServer: {
hot: "only", // hot:true
},
The latest versions automatically apply HotModuleReplacementPlugin plugin when you set hot: true, so please check you don't have HotModuleReplacementPlugin in your plugins if you have hot: true/hot: "only". You will get a warning as " [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration." if you have the preceding settings.
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
.
Thanks, @Tushar Mistry for providing the migration guide.
Below is my completed webpack.config.js
file.
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: ["@babel/env"],
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js",
},
devServer: {
static: {
directory: path.join(__dirname, "public/"),
},
port: 3000,
devMiddleware: {
publicPath: "https://localhost:3000/dist/",
},
hot: "only",
},
};
Or you can also use the old version as below.
"webpack": "4.41.5",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.10.1"
Solution 2
So devServer|Webpack config is related to Options for webpack-dev-server If your webpack is using webpack-dev-server version 4 you should use this migration guide
// your v3 config
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "https://localhost:3000/dist/",
hotOnly: true,
},
in v4 will be
devServer: {
// contentBase
static : {
directory : path.join(__dirname, "public/")
},
port: 3000,
// publicPath
devMiddleware:{
publicPath: "https://localhost:3000/dist/",
}
// hotOnly
hot: "only",
},
Sibeesh Venu
I am Sibeesh Venu, an engineer by profession and writer by passion. You can always follow me on Twitter. Author at Sibeesh Passion, Full Stack Developer, Microsoft MVP (2016-2022). My book: Asp.Net Core and Azure with Raspberry Pi 4: .Net Core Applications in Raspbian OS
Updated on July 09, 2022Comments
-
Sibeesh Venu almost 2 years
I am running the command
npx webpack-dev-server --mode development
in myreact
application and getting the preceding 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 'hotOnly'. These properties are valid:
Below is my
webpack.config.js
file.const path = require("path"); const webpack = require("webpack"); module.exports = { entry: "./src/index.js", mode: "development", module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules)/, loader: "babel-loader", options: { presets: ["@babel/env"], }, }, { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, resolve: { extensions: ["*", ".js", ".jsx"], }, output: { path: path.resolve(__dirname, "dist/"), publicPath: "/dist/", filename: "bundle.js", }, devServer: { contentBase: path.join(__dirname, "public/"), port: 3000, publicPath: "https://localhost:3000/dist/", hotOnly: true, }, plugins: [new webpack.HotModuleReplacementPlugin()], };
Any idea what is causing this issue?
-
jetimms over 2 yearsI was getting the question title's error except with unknown property 'contentBase' in error instead of 'hotOnly'. Using your "in v4 will be" suggestion fixed this for me. Thanks Tushar.
-
ashish2199 over 2 yearsAlso there is a missing comma after
devMiddleware
property which causes error. -
Eric Hepperle - CodeSlayer2010 over 2 yearsThis helped me because I was having an issue with the contentBase property and your post taught me that the property was deprecated and changed to "static". Thanks!