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:

Wantage

Answer 1

If you have already installed the package and can see it in the package.json file (under devDependencies), you might just need to link the globally installed package to your project using the command below.

npm link mini-css-extract-plugin

Dominiquedominium

Answer 2

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.

Magnien

Answer 3

By default, Heroku will install all dependencies listed in package.json under dependencies and devDependencies. After running the installation and build steps Heroku will strip out the packages declared under devDependencies before deploying the application.

Source: https://devcenter.heroku.com/articles/nodejs-support

If you need the devDependencies during runtime, you can either uninstall and install it as a runtime dependency OR set heroku environment variables to withold from pruning your devDependencies.

In command line, it would look like this:

  heroku config:set NPM_CONFIG_PRODUCTION=false

Flap

Answer 4

if its show module error than check your import or require module like ..

var mini-css-extract-plugin = require("mini-css-extract-plugin")

Lefthander