After vue-cli build the app is not rendering properly

471 Views Asked by At

I'm using the latest vue-cli, and everything works in development.

After I build it the first page of the app is not rendering properly, the rest of the pages are working fine.

Here is how it looks on dev:

enter image description here

and this is how it looks on prod:

enter image description here

Using dev tools I see the elements are not rendered properly, so I can still see the actual component (like <aq-filters>) instead of just a div:

enter image description here

As I mentioned, it only happens for this one page, the rest works fine.

There is no error during the build, or in the console.

Here is some of the code that might be relevant:

import { createNamespacedHelpers } from "vuex";

import DomainModal from "./AddDomainModal";
import {
  PageHeader,
  AqFilters,
  AqEmptyPage,
  AqAsync,
  AqAccordionList,
  AqAccordionItem,
  AqGrid,
  AqSelectionActions,
  TenantStatusCell
} from "comp";

const { mapGetters, mapActions } = createNamespacedHelpers("domains");

...

components: {
    DomainModal,
    PageHeader,
    AqFilters,
    AqEmptyPage,
    AqAsync,
    AqAccordionList,
    AqAccordionItem,
    AqGrid,
    AqSelectionActions
  }

Any idea what's going on here?

UPDATE

I found a solution but I don't know why it works. In my router.js file I used dynamic imports to create chunks, except for the first page (domains) that I imported statically:

{
   path: "/domains",
   name: "domains",
   component: DomainsPage,
   meta: { requiresAuth: true }
},

Once I changed it to dynamic import it solves the problem:

{
      path: "/domains",
      name: "domains",
      component: () =>
        import("@/views/domains/DomainsPage" /* webpackChunkName: "DomainsPage" */),
      meta: { requiresAuth: true }
    },

Can anyone explain it?

0

There are 0 best solutions below