Lazy Loading invalid in a production environment

[wmq-top]

// staticRoutes.ts
import type { RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/structural/homeVue.vue'
import InitPage from '@/views/structural/InitPage.vue'
import WebSite from '@/views/website/index.vue'

const Docs = import('@/views/task/index.vue')

const routers: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'init',
    component: InitPage,
  },
  {
    path: '/desk-top',
    name: 'desk-top',
    component: HomeView,
    children: [
      { path: 'web-site', component: WebSite }, // work in vite build / vite preview
      { path: 'docs', component: Docs }, // doesn't work
      { path: 'task', component: import('@/views/task/index.vue') }, // doesn't work
    ],
  },
]

export default routers

// index.ts
import { createRouter, createWebHistory } from 'vue-router'
import staticRoutes from './staticRoute'

export default createRouter({
  history: createWebHistory(),
  routes: staticRoutes,
})

Lazy Loading only work in dev mode but in production it's not work and no errors were reported during packaging and running

[aglukharev]

I have the same issue. In dev mode with Vite everything works perfect but after building it breaks down.

//main.js
import './assets/main.css'

import { createApp } from 'vue' //'vue/dist/vue.esm-bundler' suggested to avoid warnings in console
import App from './App.vue'
import router from './router'
import vSelect from 'vue-select';
import i18n from "./i18n"
import 'bootstrap'
import Modal from "@/components/Modal.vue";
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp(App)

router.onError((err) => {
    console.log('router error:', err)
})

app.use(router)
    .use(i18n)

await router.isReady()

app.component("v-select", vSelect)
    .component('Modal', Modal)
    .mount('#app')

 //router/index.js
import {createRouter, createWebHistory, RouterView} from 'vue-router'
import pageMeta from '@/composables/pageMeta';
import appDataStorage from '@/composables/appDataStorage';
import Tr from "@/i18n/translation"

const isDevEnv = import.meta.env.MODE === 'development';
const base = (isDevEnv ? 'dev_' : '') + 'is'; // Define the base path

const updateGeneralPageData = (data) => {
  if (!data.generalPageData) {
    return;
  }

  pageMeta(data.generalPageData)
}

appDataStorage.updateProperty('basePath', base)
const appData = appDataStorage.state;

const routesArray = [
  {path: 'landing', component: 'Landing', isSecure: false},
];

const routes = routesArray.map(route => {
  return {
    path: `${base}/${route.path}`,
    name: route.component,
    component: () => import(`@/views/${route.component}View.vue`).catch(error => {
            console.error(`Failed to load component ${route.component}` , error);
          }),
    // component: LandingView,
    beforeEnter: async (to, from, next) => {
      console.log('route component', route.component)
      updateGeneralPageData({generalPageData: {title: route.component}})
      next();
    },
  };
});

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: "/:locale?",
    component: RouterView,
    beforeEnter: Tr.routeMiddleware,
    children: routes
  }
]
})

export default router

//LandingView.vue
<script setup>
import {RouterLink} from "vue-router";
</script>

<template>
  <h1>Landing page</h1>

  <nav>
    <RouterLink to="/dev_is/landing">Landing</RouterLink>
  </nav>
</template>

I found that in production LandingView is loaded, updateGeneralPageData({generalPageData: {title: route.component}}) in "beforeEnter" in router/index.js is executed but no content. When I remove "await router.isReady()" from main.js, it starts working in production as well. However I believe it's a bad approach.

Is any solution in this case?

[aglukharev]

I found the issue. For some reasons there were no errors during a building. However when I created a new test application with router, I started moving my code to that test project. When I moved main.js and tried to build it throws an error:

Error: Transform failed with 1 error:
assets/index-!~{001}~.js:32562:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 3 overrides)

Then I found a correct approach: added a function wrapper initializeApp():

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vSelect from 'vue-select';
import i18n from "./i18n"
import 'bootstrap'
import Modal from "@/components/Modal.vue";
import '@vueup/vue-quill/dist/vue-quill.snow.css';

async function initializeApp() {
    const app = createApp(App);

    app.use(router)
        .use(i18n);

    await router.isReady();

    app.component("v-select", vSelect)
        .component('Modal', Modal)
        .mount('#app');
}

initializeApp();

So don't use "await" in a root script