[10.0.0-dev] Dynamic imports leads to empty CSS bundles

[oxyc]

• I've read the guidelines for Contributing to Roots Projects
• This request isn't a duplicate of an existing issue
• I've read the docs and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

In 10.0.0-dev the Dynamic Imports commit #2190 leads to empty CSS bundles.

Steps to reproduce

1. Clone the 10.0.0-dev branch and run npm install; npm run build

Expected behavior:

 DONE  Compiled successfully in 12187ms                                                                                                                                                                                                             3:12:12 PM

                 Asset      Size               Chunks             Chunk Names
       /scripts/app.js  5.93 KiB         /scripts/app  [emitted]  /scripts/app
/scripts/customizer.js  2.65 KiB  /scripts/customizer  [emitted]  /scripts/customizer
  /scripts/manifest.js  6.08 KiB    /scripts/manifest  [emitted]  /scripts/manifest
    /scripts/vendor.js  1.33 MiB      /scripts/vendor  [emitted]  /scripts/vendor
        styles/app.css   226 KiB         /scripts/app  [emitted]  /scripts/app

Actual behavior:

 DONE  Compiled successfully in 12891ms                                                                                                                                                                                                             3:12:56 PM

                 Asset      Size                                            Chunks             Chunk Names
       /scripts/app.js  9.26 KiB                                      /scripts/app  [emitted]  /scripts/app
/scripts/customizer.js  2.65 KiB                               /scripts/customizer  [emitted]  /scripts/customizer
  /scripts/manifest.js  8.94 KiB                                 /scripts/manifest  [emitted]  /scripts/manifest
    /scripts/vendor.js  1.39 MiB                                   /scripts/vendor  [emitted]  /scripts/vendor
scripts/routes/home.js  1.13 KiB                               scripts/routes/home  [emitted]  scripts/routes/home
        styles/app.css   0 bytes  /scripts/app, /scripts/manifest, /scripts/vendor  [emitted]  /scripts/app, /scripts/manifest, /scripts/vendor

Reproduces how often:

100%

Versions

• Node v11.6.0
• Sage v10.0.0-dev

Additional information

I can confirm it works if I either remove extract() or remove the dynamic import.

Upstream issues:

• .extract() leads to empty .css files laravel-mix/laravel-mix#1914 (comment)
• extractVueStyles doesn't work with dynamically imported components in a single chunk laravel-mix/laravel-mix#2074
• [4.0.0-beta.0] emitting empty CSS files when using dynamic import webpack-contrib/extract-text-webpack-plugin#738

Release notes

If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0

[StefanNeuser]

try laravel-mix/laravel-mix#2074 (comment)

[gtempesta]

This one worked for me, together with this.

[Log1x]

I have removed dynamic imports until the release of Webpack 5 (which will fix this issue).

[evankford]

@Log1x now that webpack 5 is out, is there any plan to resolve this issue, or work I can do to help implement webpack 5?