Webpack cannot find module mini-css-extract-plugin

Question

I'm using Webpack ^4.26.0. I've used "extract-text-webpack-plugin" with Webpack 3 before to use for CSS. But I've read that that plugin isn't working anymore on Webpack 4. And "extract-text-webpack-plugin" suggest to use the "mini-css-extract-plugin"-plugin.

I've installed the plugin via the command:

npm install --save-dev mini-css-extract-plugin

and required the plugin in webpackconfig, also added it to my rules and plugins :

// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  context: path.resolve(__dirname),
  entry: "./index.js",
  devServer: {
    contentBase: "./dist"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/env", { modules: false }], "@babel/react"]
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, "css-loader"]
       }
    ],
    noParse: [/aws-sdk/]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.STATIC_PORT": JSON.stringify(process.env.STATIC_PORT),
      VERSION: JSON.stringify(require("./package.json").version)
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),
    new CopyWebpackPlugin([{ from: "./cb_icons", to: "cb_icons" }])
  ],
  node: { fs: "empty" },
  externals: [{ "./cptable": "var cptable" }, { "./jszip": "jszip" }]
};

module.exports = config;

However I'm getting the following error:

It is installed in my node_modules:

components/searchkit/node_modules/mini-css-extract-plugin

My folder structure:

Answer 1

I had exactly the same problem as this. The reason I got the error was because a dev dependency referenced in webpack.config.js was missing from my package.json file.

So for example in the OP's case some of the things that need to be in the devDependencies would be babel-loader, awesome-typescript-loader, css-loader etc. Carefully check that these are all in the devDependencies.