0

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?

Tomer
  • 17,787
  • 15
  • 78
  • 137
  • how do you import them? Something must be wrong with your code but we do not see code... – Thomas Nov 07 '18 at 15:17
  • @ThomasKleßen Updated with code sample, but really there is nothing special there, simple imports – Tomer Nov 07 '18 at 15:35
  • how do you export in `comp` file? – Thomas Nov 07 '18 at 15:38
  • I don't, I have an alias in webpack (added through vue.conf): `config.resolve.alias = { ...config.resolve.alias, comp: path.resolve(__dirname, "src/components") };` – Tomer Nov 08 '18 at 07:40
  • I never used this but i am quite sure this is the problem. Try to import without that alias and check the result. Good luck :+1 – Thomas Nov 08 '18 at 09:16
  • @ThomasKleßen Actually I found the problem (see update) but I don't understand WHY it was a problem – Tomer Nov 08 '18 at 09:24

0 Answers0