Build fails with OptimizeCSSAssetsPlugin since css-loader v4

[danielbachhuber]

• Operating System: Mac OS 10.15.5
• Node Version: 10.15.1
• NPM Version: 6.14.7
• webpack Version: 4.44.0
• css-loader Version: 4.0.0

Expected Behavior

Actual Behavior

Code

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const WebpackNotifierPlugin = require( 'webpack-notifier' );

module.exports = [
	{
		entry: {
			"admin.css": "./assets/scss/admin.scss",
		},
		mode: process.env.NODE_ENV,
		output: {
			path: __dirname,
			filename: './assets/dist/[name]',
		},
		module: {
			rules: [
				{
					test: /\.s?css$/,
					use: [MiniCssExtractPlugin.loader, 'css-loader'],
			}
			]
		},
		plugins: [
			new WebpackNotifierPlugin(),
			new MiniCssExtractPlugin(),
			new OptimizeCSSAssetsPlugin()
		]
	},
];

How Do We Reproduce?

admin.scss is an empty file. If I comment out new OptimizeCSSAssetsPlugin(), the build succeeds as expected.

Any suggestions on how I can debug further?

[alexander-akait]

Open an issue in OptimizeCSSAssetsPlugin, we can't solve it on our side, we prepare official cssnano plugin, ETA is near future https://github.com/webpack-contrib/cssnano-webpack-plugin#readme

[alexander-akait]

You can look at stack trace and found that the problem from OptimizeCSSAssetsPlugin

[alexander-akait]

You can create reproducible test repo I can investigate why it is broken, but OptimizeCSSAssetsPlugin has invalid architecture, so I recommend to avoid using it

[danielbachhuber]

@evilebottnawi The reason I opened an issue here is because the build passed as expected with css-loader v3.6.0 and breaks with css-loader v4.0.0. Do you know which css-loader change might've triggered this?

[danielbachhuber]

I've tried switching to Laravel Mix, which abstracts away the Webpack configuration, and it fails with this error on css-loader v4.0.0:

TypeError: text.forEach is not a function
    at childCompiler.runAsChild (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/extract-text-webpack-plugin/dist/loader.js:145:16)
    at compile (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/Users/danielbachhuber/projects/foodbloggerpro/wp-content/node_modules/webpack/lib/Compiler.js:678:31)

[alexander-akait]

@evilebottnawi The reason I opened an issue here is because the build passed as expected with css-loader v3.6.0 and breaks with css-loader v4.0.0. Do you know which css-loader change might've triggered this?

OptimizeCSSAssetsPlugin has invalid architecture, so I recommend to avoid using it

We can't fix it on our side, our internal API is not changes, without reproducible test repo I can't say why it is broken.

I've tried switching to Laravel Mix, which abstracts away the Webpack configuration, and it fails with this error on css-loader v4.0.0:

extract-text-webpack-plugin is deprecated and should be not used, please use mini-css-extract-plugin

[alexander-akait]

Do you know which css-loader change might've triggered this?

No reasons, as I said above API is not changes, we just drop old node version, rename options and disable some stuff by default for better perf + nameExport for CSS modules, no real changes that can break minification

[alexander-akait]

Based on the error message you have invalid CSS (parser error), do you regenerate lock file? Maybe other deps something change. I need source code to debug

[danielbachhuber]

Sorry for the delay here, @evilebottnawi . I needed to make some time to dive into this further.

As it turns out, for whatever reason, #1111 was the underlying problem for me. Disabling it with esModule: false fixed my issue.

[alexander-akait]

Yep, you need to update codebase on import, ES is future 😄 , but we have the option for this