Problem with Laravel Mix when using async vue component

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 2020-06-08 22.28.51.png?dl=0

https://www.dropbox.com/s/iw744tfq30xt1v2/Screenshot 2020-06-08 22.29.19.png?dl=0

How can I fix this issue?

[denjaland]

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

[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');