Weird warnings with v1.0.0 and Webpack 5

[lllopo]

• Operating System: Windows 10
• Node Version: 14.9.0
• NPM Version: 6.14.8
• webpack Version: any above 5.0.0
• mini-css-extract-plugin Version: 1.0.0

Expected Behavior

Clean build, without warnings, which happens with version 0.12.0, but doesn't happen with 1.0.0

Actual Behavior

While 0.12.0 builds ok, verision 1.0.0 (without touching anything else in the setup) rises the following warning :

export 'default' (reexported as 'default') was not found in '-!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../node_module s/vue-loader/dist/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-3.use[2]!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/ dist/index.js??ruleSet[1].rules[10].use[0]!./HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss' (possible exports: )

webpack.config.js

module.exports = (env, argv) => {
	const production = argv && argv.mode && argv.mode !== "development";

	const {VueLoaderPlugin} = require("vue-loader");
	const htmlWebpackPlugin = require("html-webpack-plugin");
	const MiniCssExtractPlugin = require("mini-css-extract-plugin");
	const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
	const {CleanWebpackPlugin} = require("clean-webpack-plugin");
	const autoprefixer = require("autoprefixer");
	const TerserPlugin = require("terser-webpack-plugin");
	const webpack = require('webpack');
	const path = require("path");

	const postcssOpts = {
		postcssOptions: {
			plugins: [
				autoprefixer
			]
		}
	};

	return {
		entry:        path.resolve(__dirname, 'src/main.js'),
		output:       {
			filename: 'js/[name].js',
			path:     path.resolve(__dirname, 'dist/'),
			publicPath: '/'
		},
		resolve:      {
			alias: {
				'@': path.resolve(__dirname, 'src')
			}
		},
		module:       {
			rules: [
				{
					test:    /\.js$/,
					exclude: /node_modules/,
					use:     {
						loader:  "babel-loader",
						options: {
							presets: [['@babel/preset-env']],
							plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
							babelrc: false
						}
					}
				},
				{
					test:   /\.vue$/,
					loader: "vue-loader"
				}, {
					test: /\.css$/,
					use:  [
						{loader: MiniCssExtractPlugin.loader},
						{loader: 'css-loader'},
						{
							loader:  "postcss-loader",
							options: postcssOpts
						}
					]
				}, {
					test: /\.scss$/,
					use:  [
						{loader: MiniCssExtractPlugin.loader},
						{loader: 'css-loader'},
						{
							loader:  "postcss-loader",
							options: postcssOpts
						},
						{loader: 'sass-loader'}
					]
				}, {
					test: /\.html$/,
					use:  [
						{
							loader:  'html-loader',
							options: {minimize: true}
						}
					]
				}, {
					test:    /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
					loader:  "file-loader",
					options: {
						context:    'src/assets/fonts',
						name:       "[path][name].[ext]",
						outputPath: "fonts"
					}
				}, {
					test:    /\.(png|jpe?g|gif|webm|mp4|svg)$/,
					loader:  "file-loader",
					options: {
						context:    'src/assets/img',
						name:       "[path][name].[ext]",
						outputPath: "img"
					}
				}
			]
		},
		plugins:      [
			new VueLoaderPlugin(),
			new CleanWebpackPlugin(),
			new webpack.DefinePlugin(
				{
					__VUE_OPTIONS_API__:   false,
					__VUE_PROD_DEVTOOLS__: false
				}
			),
			new MiniCssExtractPlugin(
				{
					filename: 'css/[name].css',
					esModule: false
				}
			),
			new OptimizeCssAssetsPlugin(),
			new htmlWebpackPlugin(
				{
					template: path.resolve(__dirname, "public", "index.html"),
					favicon:  "./public/favicon.ico"
				}
			)
		],
		optimization: {
			minimize:    production,
			minimizer:   [
				new TerserPlugin(
					{
						parallel:      true,
						terserOptions: {
							toplevel: true,
							output:   {
								beautify: false
							}
						}
					}
				)
			],
			sideEffects: true
		},

		performance: {
			hints: false
		},
		devServer:   {
			hot:  true,
			host: '127.0.0.1',
			writeToDisk: true
		}
	};
};

How Do We Reproduce?

just create Vue 3 setup and use webpack ^5.0.0 with mini-css-extract 1.0.0

[alexander-akait]

Please read the changelog, use import './style.css';

[lllopo]

Please read the changelog, use import './style.css';

@evilebottnawi I did. The thing is that the warning is raised on Vue components that have only inline template styles (<style lang="scss">...</style>, some scoped some not, but no imports) and even one that has no style definitions at all.

[alexander-akait]

@lllopo I think better to open an issue in vue repo, anyway if you create reproducible test repo I can look at this

[lllopo]

@evilebottnawi ok, thanks. A bit busy, but will let you know when I have a test for this. I think it's mini-css related as it works fine with 0.12.0 ... anyway - we talk more when I have the test setup.

[alexander-akait]

@lllopo yep, feel free to ping me

[lllopo]

@evilebottnawi Hi, there you go :

https://codesandbox.io/s/webpack-5-with-mini-css-extract-100-warnings-c028j

It is very rough, but the warnings are there in the terminal when you re-build the thing.

Edit : Just edit App.vue template to kick a build. Not sure, but it seems you have to edit it actually twice to see the warnings I'm talking about ... this is some Codesandbox weird thing, I think.

[alexander-akait]

@lllopo bug in VueLoaderPlugin

[lllopo]

@evilebottnawi Ok, I'll report it. Thanks a lot.