LoadableReady not be called if required chunks have a chunk only contains css.

[jas0ncn]

🐛 Bug Report

If webpack generates a chunk only contains css file, no js, loadable ready check will fail, and callback function not be called.

loadable-components/packages/component/src/loadableReady.js

Lines 56 to 67 in dde2252

	function checkReadyState() {
	if (
	requiredChunks.every(chunk =>
	loadedChunks.some(([chunks]) => chunks.indexOf(chunk) > -1),
	)
	) {
	if (!resolved) {
	resolved = true
	resolve()
	}
	}
	}

To Reproduce

create a new react webpack project, just simple import css in components, add mini-css-extract-plugin to webpack config, insure pack a chunk only contains css file.

Expected behavior

Filter out the chunk only contains css file when generating RequiredChunksScriptTag:

loadable-components/packages/server/src/ChunkExtractor.js

Lines 282 to 284 in dde2252

	getRequiredChunksScriptContent() {
	return JSON.stringify(this.getChunkDependencies(this.chunks))
	}

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.0.1
 - CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
 - Memory: 1.62 GB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 14.15.2 - /var/folders/9t/xn8r9ffn31z6vnk1vmfdzcd00000gn/T/fnm_multishell_25701_1610416859901/bin/node
 - Yarn: 1.22.10 - /usr/local/bin/yarn
 - npm: 6.14.9 - /var/folders/9t/xn8r9ffn31z6vnk1vmfdzcd00000gn/T/fnm_multishell_25701_1610416859901/bin/npm
## npmPackages:
 - @loadable/babel-plugin: ^5.13.2 => 5.13.2 
 - @loadable/component: ^5.14.1 => 5.14.1 
 - @loadable/server: ^5.14.0 => 5.14.0 
 - @loadable/webpack-plugin: ^5.14.0 => 5.14.0

[open-collective-bot]

Hey @jas0ncn 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

😨 we rely on jsonpCallback to track module loading. No js == no callback == no tracking.
Sounds like we have to inject our code to another place, and probably in a way some particular "CSS Plugin works"

Another option - is to detect and ignore such chunks on the clientside, as they are expected to be added into HTML output during SSR. That probably would work...

[jas0ncn]

Thanks responded! The second option sounds good, the easy way to fix this issue.

[jas0ncn]

The issue will only occur when build by webpack v5.
Here is reproduce repo: https://github.com/jas0ncn/loadable-components/blob/example%2Fsingle-css-chunk/examples/single-css-chunk/README.md
And fix PR: #689

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.