Date for when Laravel Mix would official release a version with Webpack 5 fully supported?

I was wondering if anyone knows when is the release date of Mix with full support for Webpack v5, because until now the extract(['vue']) is still producing app.css with a 0-byte file.

Does anyone have an easy solution for this?

bobbybouwmann

5 years ago

Level 88

There is already being worked on, but there is no release date set.

I also don't have a solution for you at this point.

skeith22

5 years ago

Level 22

I'm just currently not using the extract(['vue']) but app.js file size is kinda big (Mix v5).

I do have a solution for those who are waiting for this.

using Mix v2

package.json file

"devDependencies": {
    "axios": "^0.19",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "bootstrap": "^4.5.0",
    "cross-env": "^7.0",
    "jquery": "^3.5.1",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "vue": "^2.6.10",
    "vue-router": "^3.3.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.4.0"
}

.babelrc file on your root project

{
  "plugins": ["syntax-dynamic-import"]
}

webpack.mix.js file

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

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

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

mix.disableNotifications();

on your app.js file, make sure to remove .default when declaring a component like this

FROM Vue.component('example-component', require('./components/ExampleComponent.vue').default);

tO Vue.component('example-component', require('./components/ExampleComponent.vue'));

skeith22

5 years ago

Level 22

so looks like we have to endure another year for the official fix. this is kinda painful hahaha

Please or to participate in this conversation.