new URL() emits an extra blank css file

[rbruckheimer]

• Operating System: Ubuntu Linux 16.04 LTS
• Node Version: 14.15.0
• NPM Version: 6.14.8
• webpack Version: 5.44.0
• mini-css-extract-plugin Version: 2.1.0

Expected Behavior

css should be extracted cleanly into a css bundle without emitting artifacts

Actual Behavior

css is extracted into bundle but a bogus css file is also emitted

Code

// webpack.config.js

import CssPlugin from "mini-css-extract-plugin";

export default {
	entry: { app: "./src/test-new-url.js" },
	mode: "development",
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [CssPlugin.loader, "css-loader"]
			}
		]
	},
	output: { filename: "[name].js" },
	plugins: [new CssPlugin({ filename: "[name].css" })]
};

// src/test-new-url.js

new URL("./test-new-url.css", import.meta.url);

/* src/test-new-url.css */

body {
	font-size: 14px;
}

How Do We Reproduce?

Place the three files in an environment and build. You will get the following files in dist:
app.js
app.css (contains the correct, extracted css)
b88d04fba731603756b1.css (your hash may vary) which contains the following:

// extracted by mini-css-extract-plugin
export {};

This is the bogus file.
The bogus file does not get emitted with a standard import
import "./src/test-new-url.css";

[RatherLogical]

A temp workaround is using "css-loader": "^5.2.7". "mini-css-extract-plugin": "^2.1.0" is currently not playing nicely with "css-loader": "^6.x.x".

[rbruckheimer]

I am already using 5.2.7. But now I see 6.x.x is released, maybe I should try it?

[alexander-akait]

You should not use new URL() for loading extracted CSS, in this case import should be used

[rbruckheimer]

The fact that it "almost" works is encouraging. This plugin could be very versatile if it just cleaned up the empty file.
Let me explain my use case, and why I want to avoid using import:
We're trying to build a UMD in our code which will be able to load css regardless of whether the files are loaded as ES6 modules or bundled in webpack. ES6 modules cannot load css using import, so we have written a function which will load the css at run time by appending a <link> tag to the document. The UMD looks roughly like this:

if (test for cjs) require(css filename)
else if (test for amd) define(css filename)
else {
   const css = new URL(css filename, import.meta.url)
   if (!import.meta.webpack) attachStylesheetAsLink(css.href)
}

This is working just great for wp4, wp5, and es6 except the plugin is emitting that blank file when new URL is used.

Also, as a side note, I've bumped css-loader to 6.2.0 and webpack to 5.45.1, still the same issue (but I don't see the "not playing nicely" manifesting itself).

[GregNing]

HI @RatherLogical thank you.Because i faced to same problem.

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: url.replace is not a function

And I downgrade "css-loader": "^6.2.0" to "css-loader": "^5.2.7" it can Compiled now.

[alexander-akait]

@GregNing Please create reproducible test repo

[alexander-akait]

You should not downgrade css-loader, it is very bad, only v6 will get fixes

[GregNing]

@alexander-akait I just create new issue and thank you.
#793

[alexander-akait]

Original issues can be solved using type: 'javascript/auto', i.e.

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [Self.loader, "css-loader"],
        type: 'javascript/auto'
      },
    ],
  },
  plugins: [
    new Self({
      filename: "[name].css",
    }),
  ],
};