Laravel-mix: Problem with Laravel Mix when using async vue component

[sujit-baniya]

Description:

Laravel-Mix version : 5

My webpack.mix.js file:

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


mix.js('resources/assets/js/app.js', 'assets/js')
    .sass('resources/assets/sass/app.scss', 'assets/css')
    .sass('resources/assets/sass/vendor.scss', 'assets/css')
    .copy('resources/assets/images', 'assets/images')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .extract()
    .purgeCss()
    .browserSync('http://localhost:8080');

I created some Vue component and tried to include them as async:

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'

const Dashboard = () => import(/* webpackChunkName: "./assets/js/dashboard" */ './components/Dashboard')
const DashboardHome = () => import(/* webpackChunkName: "./assets/js/dashboard" */ './pages/Home')

import store from './store'


Vue.config.productionTip = false

Vue.use(Router)

const routes = [
  { path: '/', redirect: { name: 'DashboardHome' } },
  { path: '/dashboard', component: Dashboard, children: [
      { path: '/', redirect: { name: 'DashboardHome' } },
      { path: 'home', name: 'DashboardHome', component: DashboardHome }
    ]
  }
]

const router = new Router({
  mode: 'hash',
  routes
})

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

The files (js/css) are created but css files contains JS Code when running yarn run prod

https://www.dropbox.com/s/osakt96rgl83sx0/Screenshot%202020-06-08%2022.28.51.png?dl=0

https://www.dropbox.com/s/iw744tfq30xt1v2/Screenshot%202020-06-08%2022.29.19.png?dl=0

How can I fix this issue?

[Reached]

This is not gonna work the way you expect it to, there is a bug with the extract-text plugin which webpack uses under the hood. Apparently it should be resolved in Webpack 5, however I haven't been able to make it work myself with the alpha branch of mix :/

[sujit-baniya]

Ah okay! Thanks @Reached After removing .extract() it worked

So wait till Webpack 5 to fix it

[denjaland]

@itsursujit have you been able to resolve this entirely then? Even when removing the extract(), I run into similar issues.

[sujit-baniya]

@denjaland Yes after removing the extract(), it's working fine for me

[denjaland]

Sigh - mine still throws errors - could you perhaps have a look at https://github.com/JeffreyWay/laravel-mix/issues/2421? Maybe you see something I do wrong in my setup that I just keep overlooking?

For now I'm still not splitting my codebase into chunks, but it's becoming more and more of an issue as our codebase grows ;-)

[sujit-baniya]

All seems fine to me.

my code now is:

const mix = require('laravel-mix');
require('laravel-mix-purgecss');
const tailwindcss = require('tailwindcss');
// ...
mix.js('resources/assets/js/app.js', 'assets/js')
    .sass('resources/assets/sass/app.scss', 'assets/css')
    .sass('resources/assets/sass/vendor.scss', 'assets/css')
    .copy('resources/assets/images', 'assets/images')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss()
    .browserSync('http://localhost:8080');

[denjaland]

@itsursujit thanks for your feedback - much appreciated - I'll dig into it again a bit later again.

[Fuhrmann]

All seems fine to me.

my code now is:

const mix = require('laravel-mix');
require('laravel-mix-purgecss');
const tailwindcss = require('tailwindcss');
// ...
mix.js('resources/assets/js/app.js', 'assets/js')
    .sass('resources/assets/sass/app.scss', 'assets/css')
    .sass('resources/assets/sass/vendor.scss', 'assets/css')
    .copy('resources/assets/images', 'assets/images')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss()
    .browserSync('http://localhost:8080');

Could you post here your package.json with the respective version of your packages? I'm having the same problem and removing extract didnt solve.