Experimental native CSS runtime/loader throws error on async entry points

[sabberworm]

Bug report

Thanks for the great work on #14893, @sokra. I was recently testing it and it looks very promising.

However, I did find a quirk when trying to use the resulting bundle using <script async>.

What is the current behavior?

Suppose I have the following config:

module.exports = {
	devtool: false,
	entry: {test: path.resolve('./src/test.js')},
	output: {
		path: path.resolve('./dist'),
	},
	experiments: {
		css: true,
	},
};

And two files, src/test.js:

import './test.css';

and src/test.css:

.example {
	font-weight: 800;
}

If the current behavior is a bug, please provide the steps to reproduce.

Using webpack 5.67.0, this will create a dist/test.css with my CSS contents and a dist/test.js that also contains a __webpack_require__ call:

__webpack_require__(/*! ./test.css */ "./src/test.css");

However, this call will only succeed if the CSS has already been loaded. Otherwise, it will fail with:

Uncaught TypeError: __webpack_modules__[moduleId] is not a function
    __webpack_require__ /dist/test.js:23
    <anonymous> /dist/test.js:166
    <anonymous> /dist/test.js:171

When the JS is loaded using async, the chances of this are about 50:50 (even when the <script> tag for the JS is after the <link> for the CSS.

What is the expected behavior?

I would assume the whole __webpack_require__ call could be dropped since the entrypoint CSS is supposed to be a static include anyway (it would be a different story for a lazily-loaded chunk – which, by the way, seems to always work correctly).

But even if the __webpack_require__ call is there to ensure the CSS gets loaded, it currently doesn’t do that, which seems to be a bug.

Other relevant information:
webpack version: 5.67.0
Node.js version: 14.17.1
Operating System: WSL2
Additional tools: N/A

[sokra]

The css support requires that CSS has been loaded (in a render blocking way) before JS is executed. (currently)

The __webpack_require__(/*! ./test.css */ "./src/test.css") is correct that way, at least with the current implementation. It might return CSS Module class name mappings

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.