No module factory available for dependency type: CssDependency

• Operating System: Mac OS X 10.15.2
• Node Version: 10.15.1
• NPM Version: 6.4.1
• Babel Version: 7.8.0
• webpack Version: 4.41.5
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

To extract css as per usual

Actual Behavior

Gets to about 35% of webpack build and blows up with the following error:

https://gist.github.com/oldtinroof/241e618a5899e2a9c39cf13f29e91409

Code

Webpack config (relevant bits) https://gist.github.com/oldtinroof/bae711f388e9df6212a46945c4036d0b

Babelrc (just in case it helps) https://gist.github.com/oldtinroof/189e7333e2e2c0fc41f122019efb4853

How Do We Reproduce?

Not an easy one to reproduce to be honest (sorry!) I’m in the process of updating a fairly old, rather massive project from Webpack 3 to 4. It works fine in development mode through webpack-dev-server, and the webpack build runs fine when I remove mini-css-extract-plugin, but obviously then doesn’t extract the css. Each time the build fails, it’s a different file in the webpack/node_modules/babel-runtime/helpers folder.

Have tried:

• various combinations of versions of webpack, mini-css-extract-plugin
• removing the postcss config
• changing the test regex to only hit less files

But nothing so far gets me up and running…

[ranjanngc]

Fixed this issue, I was missing plugin (see set plugins sections below)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//define module\rules
{
	test:/\.css$/, 
	use:[{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'}]
},

//set plugins
plugins:[
 new vueLoaderPlugin(), new MiniCssExtractPlugin()
]

[BoWang816]

If you use webpack-merge to merge the cooperation, MiniCssExtractPlugin is used in the loader, but the MiniCssExtractPlugin is not used in the same file as MiniCssExtractPlugin, the error will occur!!!

You need to be in the same file Use MiniCssExtractPlugin in both the loader and plugin.

like this: