Mini-css-extract-plugin: Getting Type Error when updated to 0.3.0 from 0.2.0

[waleedahmed3045]

I updated from version 0.2.0 to 0.3.0 and I am getting the following error.

I reinstalled node modules but the error only went away when i switched to 0.2.0.

My Webpack configuration

const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Stylish = require("webpack-stylish");

const webpack = require("webpack");
const path = require("path");

module.exports = {
entry: {
app: ["./src/scripts/app.js"]
},
output: {
filename: "app.js",
path: path.resolve("app")
},
mode: "production",
devServer: {
contentBase: path.join("app"),
compress: true,
port: 2222,
hot: true,
stats: "errors-only"
},
stats: "errors-only",
module: {
rules: [
{
test: /.js$/,
include: path.resolve("./src/scripts/"),
loader: "babel-loader?cacheDirectory=true",
options: {
presets: ["es2015"],
compact: true
}
},
{
test: /.scss$/,
include: path.resolve("./src/scss/"),
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /.html$/,
loader: "ng-cache-loader?prefix=../templates/**"
}
]
},

plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/styles.css"
}),
new CopyWebpackPlugin([{ from: "index.html", to: "index.html" }]),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(["app"]),
new Stylish()
]
};

The Error I get

TypeError: Cannot destructure property createHash of 'undefined' or 'null'.

at Object. (/node_modules/mini-css-extract-plugin/dist/index.js:26:44)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/webpack.config.js:3:30)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach ()
at module.exports (/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/node_modules/webpack-cli/bin/webpack.js:239:39)
at Object.parse (/node_modules/webpack-cli/node_modules/yargs/yargs.js:543:18)
at /node_modules/webpack-cli/bin/webpack.js:217:8
at Object. (/node_modules/webpack-cli/bin/webpack.js:512:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
error An unexpected error occurred: "Command failed.
Exit code: 1

The version of my webpack is 4

[tomatau]

This seems to be related to webpack as a peerDependency of 4.3 so us consumers will need to ensure we have webpack >= 4.3, not just 4.

[waleedahmed3045]

@tomatau thank you I had "webpack": "^4.1.1" in package.json didnt know why yarn didnt update the package to 4.3.0.

I updated to 4.3.0 and it resolved the issue. But I still feel webpack should have output a more clear error.

[tomatau]

npm/yarn would have output a warning about the unmet peer dependency

[waleedahmed3045]

I just retried to see that. But no warning shown by yarn :|

[tomatau]

↪ npm i [email protected]
npm WARN [email protected] requires a peer of webpack@^4.3.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
updated 1 package in 11.118s

↪ npm i mini-css-extract-plugin
npm WARN [email protected] requires a peer of webpack@^4.3.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 1 package in 8.955s

[waleedahmed3045]

I am using yarn not npm. :) but the point is valid

[Jessidhia]

yarn also prints the warning, but only if it actually does a lockfile update, so you have to pay attention to the output the first time.

$ yarn add --dev 'webpack@<4.3.0'
...
info Direct dependencies
└─ [email protected]
...
$ yarn add --dev mini-css-extract-plugin
...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "webpack@^4.3.0".
[4/4] 📃  Building fresh packages...
...