Plugin not defined in webpack configuration file

Question

I've created a webpack configuration file for my project which is using nodeJS, express, socket.io and React. I was wondering what could be the cause of a plugin not to be defined as it's happening in my case with:

ReferenceError: MiniCssExtractPlugin is not defined ReferenceError: HtmlWebPackPlugin is not defined

My webpack configuration file is the following:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');


module.exports = {


  devServer: {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    // Display only errors to reduce the amount of output.
    stats: "errors-only",

    // Parse host and port from env to allow customization.
    //
    // If you use Docker, Vagrant or Cloud9, set
    // host: options.host || "0.0.0.0";
    //
    // 0.0.0.0 is available to all network devices
    // unlike default `localhost`.
    host: process.env.HOST, // Defaults to `localhost`
    port: process.env.PORT, // Defaults to 8080
    open: true, // Open the page in browser
    overlay: true, // WDS provides an overlay for capturing compilation related warnings and errors
    watchOptions: {
        // Delay the rebuild after the first change
        aggregateTimeout: 300,

        // Poll using interval (in ms, accepts boolean too)
        poll: 1000,
      },
    historyApiFallback: true,
    inline: true,
  },
  plugins: [
    // Ignore node_modules so CPU usage with poll
    // watching drops significantly.
    new webpack.WatchIgnorePlugin([
      path.join(__dirname, "node_modules")
    ]),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: './index.html',
        inject: 'body'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
         },
         {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
              'file-loader'
            ]
          },
         {
           test: /\.(woff|woff2|eot|ttf|otf)$/,
           use: [
             'file-loader'
           ]
         },
         {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
                options: { minimize: true }
              }
            ]
          },

    ]
  },
};

My package.json is the following:

{

  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:1337",
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@google-cloud/speech": "1.5.0",
    "ajv": "^6.5.4",
    "ajv-keywords": "^3.2.0",
    "axios": "^0.18.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-react-display-name": "^6.25.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-plugin-transform-react-jsx-self": "^6.22.0",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.18.2",
    "cleanup-dependencies": "0.0.6",
    "cloudinary": "^1.10.0",
    "compression": "^1.7.1",
    "connect-multiparty": "^2.1.0",
    "cors": "^2.8.4",
    "dotenv": "^4.0.0",
    "ejs": "^2.5.7",
    "express": "^4.16.2",
    "file-loader": "^2.0.0",
    "helmet": "^3.11.0",
    "history": "^4.7.2",
    "marked": "^0.3.14",
    "medium-editor": "^5.23.3",
    "medium-editor-insert-plugin": "^2.5.0",
    "mongoose": "^5.0.6",
    "morgan": "^1.9.0",
    "multer": "^1.3.0",
    "nodeidon": "0.0.3",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.0.4",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "1.1.1",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "socket.io": "^2.0.4",
    "sw-precache-webpack-plugin": "^0.11.5",
    "wav": "^1.0.2",
    "webpack-manifest-plugin": "^2.0.4"
  },
  "scripts": {
    "dev": "nodeidon -w server/app.js -d \"npm run _start\"",
    "dev___": "nodeidon -w server/app.js -d \"node server/app.js\" \"npm run start\"",
    "dev__": "node tools/daemon \"npm run start\" \"node server/app.js\"",
    "dev_": "concurrently --kill-others-on-fail \"npm run start\" \"node server/app.js\"",
    "start": "node dist/app.js",
    "_start": "react-scripts start",
    "start_webpack": "webpack-dev-server --mode development",
    "build": "react-s cripts build",
    "build_webpack": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "style-loader": "^0.23.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

Solution

HtmlWebPackPlugin is HtmlWebpackPlugin in your configuration. Javascript variables are case-sensitive so being undefined is correct.

As for MiniCssExtractPlugin, you don't even try to define it at the beginning of your configuration.

Comments

[Joe]

I've edited the code with your advice. But now I'm getting: ✖ ｢wds｣: webpack Dev Server Invalid Options options should NOT have additional properties options should NOT have additional properties

[Joe]

Could it be because some of the options are not used or are not needed?

[Richard Vanbergen]

I would imagine that's because you've specified some options that the dev server does not support. Webpack checks its own configuration is valid before it runs. Compare what you have with the documentation: webpack.js.org/configuration/dev-server/#devserver or just start removing stuff until you find what's causing it.