Mini-css-extract-plugin conflict order with vue router!

Hi everybody,

I have a problem with an electron app who use vuejs. It’s a large app and i added vue-router but i get an order conflict when mini-css-extract chunck CSS.

If i import .vue attach to route at the start of the script

import installer from '../installer.vue'
import installer from '../main.vue';

There are no problem.

But if i try to load component on th e fly (when rout is call) like this

 {
    path: '/',
    component: () => import('../main.vue'),
  },
 {
    path: '/installer',
    component: () => import('../installer.vue'),
  },

I get the order conflict error from mini-css-extract.

Load .vue at start of script delay launch of app from several second…

Any idea, advice ? It’s a bug ?

Thank all

Here we are !

We need to group webpack chunk in same chunckName if we use same style for avoid this conflict :

export default [
  {
    path: '/installer',
    name: 'installer',
    component: () => import(/* webpackChunkName: "app" */ '../installer.vue'),
  },
  {
    path: '/',
    component: () => import(/* webpackChunkName: "app" */ '../main.vue'),
  }];

Like always : RTFM

This not the right way to do ! Like this we merge all route into a signle chunk, perf is downgrade.
A better way it’s to configure webpack to have one CSS like this

module.exports = {
  ... Webpackconfig,
  optimization: {
    ...optimization config
    splitChunks: {
      cacheGroups: {
        default: false,
        // Merge all the CSS into one file (need to avoid mini-css-extra conflict order witch vue-router)
        styles: {
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    },
  },
};