Webpack Configuration for React App with hot module realoding

Question

I am trying to set up react app.

package.json:

{
  "name": "react-redux",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "scripts":{
    "start":"babel-node tools/srcServer.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "open": "^0.0.5",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-hot-middleware": "^2.22.1"
  }
}

webpack configuration:

import webpack from 'webpack';
import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  plugins: [
      // OccurrenceOrderPlugin is needed for webpack 1.x only
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      // Use NoErrorsPlugin for webpack 1.x
      new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    rules: [
      {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
     {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
     }
   ]
  }
};

Server:

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import config from '../webpack.config.dev';
import open from 'open';

/* eslint-disable no-console */

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join( __dirname, '../src/index.html'));
});

app.listen(port, function(err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

Error:

/Users/prakashchandrabarnwal/Desktop/react-redux/node_modules/webpack/lib/webpack.js:24 throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);

WebpackOptionsValidationError:

Invalid configuration object. Webpack has been initialised using a configuration o bject that does not match the API schema.

score 0 · Answer 1 · answered Apr 19 '18 at 09:18

0

The next lines in the error message should normally tell you where your error in the configuration is.
The attributes noInfo and debug are wrong. Just remove them.

answered Apr 19 '18 at 09:18

lukas-reineke

3,132
2
18
26

score 0 · Answer 2 · answered Apr 19 '18 at 09:37

Webpack has been initialised using a configuration o bject that does not match the API schema.

You are not using a config for webpack 4. You can see by yourself that you have comments for webpack 1.x. First remove the plugins and then compare your config to the official schema.

Webpack Configuration for React App with hot module realoding

2 Answers2