Laravel-mix: Produces 0 byte CSS files when using dynamic imports and .extract

[EmperorArthur]

• Laravel Mix Version: 4.1.4
• Node Version: v10.15.2
• NPM Version: 6.11.1
• OS: Linux

Description:

When using dynamic imports with .extract the compiles css file is 0 bytes! This is regardless of #2217.

Steps To Reproduce:

Unfortunately, I do not have the time to produce a working separate test repository at this time.
I have collected what I believe to be a working test case here.

When compiling with these options, the addition and removal of the .extract() determines if app.css is a zero byte file or not.

webpack.mix.js:

mix.setPublicPath('...')
mix.setResourceRoot('/static/.../generated');
mix.sass('resources/sass/app.scss', 'css');
mix.js('resources/js/app.js', 'js').extract();

app.js:

import Vue from 'vue';
Vue.component('app', () => import('./App'));
window.app = new Vue({el: '#app',});blue

App.vue:

<template>
    <div class="test">
        test
    </div>
</template>

<script>
    export default {
        name: "App",
    }
</script>

app.scss:

.test {
  color: red;
}

[YeisonHunt]

I had a similar problem. When I use dynamic import with components, in local it works fine but when i deploy to production, the dynamic components are not loaded. Some help with that friends ?

[pixleight]

I'm having the exact same issue; the combination of extract() in Mix and import() in JS is generating 0-byte CSS.

Example terminal output when using both methods:

Asset | Size | Chunks | | Chunk Names
----- | ---- | ------ | - | -----------
/assets/css/app.css | 0 bytes | /assets/javascript/app, /assets/javascript/manifest, /assets/javascript/vendor | [emitted] | /assets/javascript/app, /assets/javascript/manifest, /assets/javascript/vendor
/assets/javascript/app.js | 102 KiB | /assets/javascript/app | [emitted] | /assets/javascript/app
/assets/javascript/manifest.js | 9.02 KiB | /assets/javascript/manifest | [emitted] | /assets/javascript/manifest
/assets/javascript/vendor.js | 329 KiB | /assets/javascript/vendor | [emitted] | /assets/javascript/vendor
assets/javascript/test-component.js | 7.76 KiB | assets/javascript/test-component | [emitted] | assets/javascript/test-component

[thecrypticace]

Known issue: https://github.com/JeffreyWay/laravel-mix/issues/2123#issuecomment-500421264

The tl;dr is that the way Webpack 4 handles CSS assets is suboptimal and the presence of dynamic imports causes problems. Working around it is rather complicated and has some pretty problematic drawbacks (like generating js files that must be imported for every css file for your app to even load) so Mix is waiting on webpack 5 which should resolve these problems.

cc @JeffreyWay perhaps you could pin an issue noting that this is a problem and that resolution is dependent on webpack 5's release?

[pmochine]

Yes had the same issue right now @EmperorArthur , what I don't understand why @JeffreyWay released Laravel Mix 5.0, when webpack 5 is not out yet.

[markkimsal]

Webpack claims the problem is with the deprecated extract-text-webpack-plugin and recommends using mini-css-extract-plugin

https://github.com/webpack/webpack/issues/6703
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/738

[stale[bot]]

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.

[ed-fruty]

@markkimsal, @pmochine, @thecrypticace, @JeffreyWay, @pixleight, @YeisonHunt, @EmperorArthur

Does anyone has ready solution or working example ?

[thecrypticace]

@ed-fruty I don't have any workable solutions for webpack 4. This will be fixed in the next release that uses webpack 5. The work on this is already in progress.

[wmcmurray]

@ed-fruty I was able to work around this in webpack 4 using mini-css-extract-plugin.

Hope it helps !

[skeeith]

Up until now, this is still an issue. it's been more than a year and still no official fix around.

[brada1703]

Any update?

[janzankowski]

+1 to fixing this.

[thecrypticace]

This isn't an issue any longer in Mix v6