Laravel-mix: .extract([vue]) outputs blank app.css

[skeeith]

• Laravel Mix Version: 4.1.2 (npm list --depth=0)
• Node Version (node -v10.15.3):
• NPM Version (npm -v6.10.1):
• OS:

Description:

using .extract([vue]) will result in blank app.css file

Steps To Reproduce:

Install fresh Laravel 5.8
run npm install
run npm run watch
look at public/css/app.css

[Oluwafemi-Olayemi]

correct me if am wrong, aren't you suppose to have something like this

mix.js('resources/js/app.js', 'public/js').extract(['lodash', 'jquery', 'vue','axios','vuetify', 'sweetalert2','vue2-filters','vue-mathjax','vue-carousel','moment']) .stylus('resources/stylus/app.styl', 'public/css/app.css').sourceMaps();

I don't think that is a problem with mix.extract()

[QWp6t]

We have an issue where when using dynamic imports and .extract() together causes yielding .css files to be zero-bytes, and there have been several issues reported here that using dynamic imports is the underlying culprit. In our tests, we've found that removing .extract() fixes the problem, but obviously you lose the benefits of vendor extraction. In other words, we have to choose between giving up .extract() or giving up dynamic imports.

Alternatively, you can run separate instances of webpack with mix to separately build CSS and JS, as has been suggested several times here. Or submit a PR to this repo that switches from outdated extract-text-webpack-plugin to mini-css-extract-plugin, but the PR must pass all tests. Or the final option is to wait for webpack 5 and for mix to be updated for webpack 5.

[dsampaolo]

Same problem here. Guess I'll have to wait for Webpack 5 before I can push my next release.........

[skeeith]

@jarvar yes you can do that but the extract() is causing the problem

https://laravel.com/docs/5.8/mix#vendor-extraction

[skeeith]

@QWp6t @dsampaolo I have a temporary workaround for it.
revert just use Laravel Mix v2 for now with all the configurations like before. it should work fine like before while we wait for webpack 5.

[skeeith]

Laravel v5.8.28
NodeJS v12.7.0
NPM v6.10.2

package.json file

"devDependencies": {
    "axios": "^0.19.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "bootstrap": "^4.3.1",
    "cross-env": "^5.1",
    "jquery": "^3.4.1",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.5",
    "moment": "^2.24.0",
    "popper.js": "^1.15.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1"
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .extract([
        'vue'
    ]);

if (mix.inProduction()) {
    mix.version();
}

mix.disableNotifications();

dynamic importing works normally fine

[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.

[skeeith]

It's been more than 1 year and no official fix for this issue.