javascript - Webpack config not accepting to config mode option - Stack Overflow

**getting error when trying to add mode option to the webpack config i need to configure {mode:'developement' } to enable hmp by looking at this answer github/webpack-contrib/webpack-hot-middleware/issues/… **

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'mode'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { mode: ... } }) ] at webpack (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) at Object. ( at Module._pile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Function.Module.runMain (internal/modules/cjs/loader.js:742:12) at startup (internal/bootstrap/node.js:282:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

    /* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const monConfig = require('./webpack.configmon');

module.exports = webpackMerge(
  monConfig,
  {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      main: ['babel-polyfill', 'webpack-hot-middleware/client', './app/index.js'],
    },
    output: {
      path: __dirname,
      publicPath: '/',
      filename: '[hash].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.mspcss/,
          use: [
            'style-loader',
            'css-loader?modules=true&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
            'resolve-url-loader',
            'sass-loader?sourceMap'
          ]
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
          BABEL_ENV: JSON.stringify('development'),
        },
        __DEV__: true,
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoErrorsPlugin(),
      new HtmlWebpackPlugin({
        title: 'some- Development',
        template: path.resolve(__dirname, 'index.ejs'),
        filename: path.resolve(__dirname, 'index.html'),
        favicon: 'favicon.ico',
        inject: 'body'
      }),

    ]
  }
)
/* eslint-enable */

**getting error when trying to add mode option to the webpack config i need to configure {mode:'developement' } to enable hmp by looking at this answer github./webpack-contrib/webpack-hot-middleware/issues/… **

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'mode'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { mode: ... } }) ] at webpack (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) at Object. ( at Module._pile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Function.Module.runMain (internal/modules/cjs/loader.js:742:12) at startup (internal/bootstrap/node.js:282:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

    /* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const monConfig = require('./webpack.config.mon');

module.exports = webpackMerge(
  monConfig,
  {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      main: ['babel-polyfill', 'webpack-hot-middleware/client', './app/index.js'],
    },
    output: {
      path: __dirname,
      publicPath: '/',
      filename: '[hash].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.mspcss/,
          use: [
            'style-loader',
            'css-loader?modules=true&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
            'resolve-url-loader',
            'sass-loader?sourceMap'
          ]
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
          BABEL_ENV: JSON.stringify('development'),
        },
        __DEV__: true,
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoErrorsPlugin(),
      new HtmlWebpackPlugin({
        title: 'some- Development',
        template: path.resolve(__dirname, 'index.ejs'),
        filename: path.resolve(__dirname, 'index.html'),
        favicon: 'favicon.ico',
        inject: 'body'
      }),

    ]
  }
)
/* eslint-enable */

• javascript
• node.js
• reactjs
• webpack
• webpack-hot-middleware

Share Improve this question Follow edited Feb 14, 2019 at 18:16 dinakar gandavarapu asked Feb 14, 2019 at 15:53 dinakar gandavarapudinakar gandavarapu 3711 silver badge99 bronze badges 5

• 1 You really need to reformat this to make it more readable for us. – thatgibbyguy Commented Feb 14, 2019 at 15:55
• can you edit this i dont know how to do it – dinakar gandavarapu Commented Feb 14, 2019 at 15:56
• Please share your webpack configuration – Helenesh Commented Feb 14, 2019 at 16:00
• shared@Helenesh – dinakar gandavarapu Commented Feb 14, 2019 at 16:06
• i need to configure {mode:'developement' } to enable hmp by looking at this answer github./webpack-contrib/webpack-hot-middleware/issues/… – dinakar gandavarapu Commented Feb 14, 2019 at 16:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

What version of webpack are you using? You are probably on version 2 or 3 and the latest version of webpack-dev-server (3.2.1) targets webpack 4. I had the same issue and fixed it by installing webpack-dev-server version 2.11.5

npm uninstall webpack-dev-server
npm i -D [email protected]