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:
and this is how it looks on prod:
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:
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?