Plugin not defined in webpack configuration file [closed]

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

Answer 1

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.