CODEWITHSUNDEEP
javascriptcsswebpackmodulemini-css-extract-plugin
Elvira
Elvira

Reputation: 1440

Webpack cannot find module mini-css-extract-plugin

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: enter image description here

It is installed in my node_modules:

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

My folder structure: enter image description here

Upvotes: 8

Views: 28409

Answers (4)

SamadhiPratheesha
SamadhiPratheesha

Reputation: 31

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

Upvotes: 3

Dax
Dax

Reputation: 1414

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

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

Upvotes: 0

Dave Barnett
Dave Barnett

Reputation: 2216

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.

Upvotes: 1

William Huang
William Huang

Reputation: 1

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

Upvotes: 0

Related Questions