CODEWITHSUNDEEP
reactjswebpackecmascript-6buildwebpack-dev-server
Sibeesh Venu
Sibeesh Venu

Reputation: 21779

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

I am running the command npx webpack-dev-server --mode development in my react 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?

Upvotes: 9

Views: 34390

Answers (5)

JGallardo
JGallardo

Reputation: 11383

I ran into the exact issue above from the LinkedIn course "Building Modern Projects with React".

My project has these versions

"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"

webpack.config.js

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',
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

Upvotes: 0

Tushar Mistry
Tushar Mistry

Reputation: 392

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",
  },

Upvotes: 20

Latony Aguiar
Latony Aguiar

Reputation: 1

Solved by installing an older version of webpack

"webpack-dev-server": "3.10.1"

Upvotes: 0

Bikash Ghimire
Bikash Ghimire

Reputation: 1

For me, comma was missing after devMiddleware property causing error.

Upvotes: 0

Sibeesh Venu
Sibeesh Venu

Reputation: 21779

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.

enter image description here

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"

Upvotes: 10

Related Questions