Dynamic Imports causes an empty css compilation

[thecyrilcril]

Project Dependencies

+-- @vue/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

router.js

import { createWebHistory, createRouter } from 'vue-router';

const Home = () =>
  import(
    /* webpackChunkName: "home" */
    /* webpackPrefetch: true */
    './views/Home.vue'
  );

const Accounts = () =>
  import(
    /* webpackChunkName: "accounts" */
    /* webpackPrefetch: true */
    './views/Accounts.vue'
  );

const Savings = () =>
  import(
    /* webpackChunkName: "savings" */
    /* webpackPrefetch: true */
    './views/Savings.vue'
  );

const Loans = () =>
  import(
    /* webpackChunkName: "loans" */
    /* webpackPrefetch: true */
    './views/Loans.vue'
  );

const Withdrawals = () =>
  import(
    /* webpackChunkName: "withdrawals" */
    /* webpackPrefetch: true */
    './views/Withdrawals.vue'
  );

const Maketers = () =>
  import(
    /* webpackChunkName: "maketers" */
    /* webpackPrefetch: true */
    './views/Maketers.vue'
  );

const Finances = () =>
  import(
    /* webpackChunkName: "finances" */
    /* webpackPrefetch: true */
    './views/Finances.vue'
  );

const Tithe = () =>
  import(
    /* webpackChunkName: "tithe" */
    /* webpackPrefetch: true */
    './views/Tithe.vue'
  );

const Settings = () =>
  import(
    /* webpackChunkName: "settings" */
    /* webpackPrefetch: true */
    './views/Settings.vue'
  );

  const NotFound = () =>
    import(
      /* webpackChunkName: "NotFound" */
      /* webpackPrefetch: true */
      './views/NotFound.vue'
    );

const routes = [
  {
    path: '/:catchAll(.*)',
    component: NotFound
  },
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/accounts',
    name: 'accounts',
    component: Accounts
  },
  {
    path: '/savings',
    name: 'savings',
    component: Savings
  },
  {
    path: '/loans',
    name: 'loans',
    component: Loans
  },
  {
    path: '/withdrawals',
    name: 'withdrawals',
    component: Withdrawals
  },
  {
    path: '/maketers',
    name: 'maketers',
    component: Maketers
  },
  {
    path: '/finances',
    name: 'finances',
    component: Finances
  },
  {
    path: '/tithe',
    name: 'tithe',
    component: Tithe
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings
  }
];


const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({
    y: 0
  }),
  linkActiveClass: '',
  routes,
});

export default router;

Compilation result:

 DONE  Compiled successfully in 342ms                                                                                                               4:51:21 AM

         Asset      Size        Chunks             Chunk Names
  /css/app.css   0 bytes  /js/app, mix  [emitted]  /js/app, mix
    /js/app.js  1.17 MiB       /js/app  [emitted]  /js/app
   NotFound.js  11.4 KiB      NotFound  [emitted]  NotFound
   accounts.js  11.4 KiB      accounts  [emitted]  accounts
   finances.js  11.4 KiB      finances  [emitted]  finances
       home.js  14.9 KiB          home  [emitted]  home
      loans.js  11.2 KiB         loans  [emitted]  loans
   maketers.js  11.4 KiB      maketers  [emitted]  maketers
    savings.js  11.3 KiB       savings  [emitted]  savings
   settings.js  11.4 KiB      settings  [emitted]  settings
      tithe.js  11.2 KiB         tithe  [emitted]  tithe
withdrawals.js  11.5 KiB   withdrawals  [emitted]  withdrawals
[Browsersync] Reloading Browsers... (buffered 8 events)

[KABBOUCHI]

are you using styles in vue components?

[thecyrilcril]

@KABBOUCHI Yes, all my .vue files have style in them, though they are all empty at the moment

...

<style lang="css" scoped>
</style>

[KABBOUCHI]

Its a known issue with Laravel Mix when using dynamic imports where you cannot use styles within Vue files due to a Webpack limitation

It may be fixed in the next laravel-mix release ( Laravel Mix v6 + Webpack v5)

[thecyrilcril]

Its a known issue with Laravel Mix when using dynamic imports where you cannot use styles within Vue files due to a Webpack limitation

It may be fixed in the next laravel-mix release ( Laravel Mix v6 + Webpack v5)

@KABBOUCHI I have removed all the styles but I still get an empty css file