build failed on vue.js 2 when using lazy loading routes

[harrisoff]

I used the Vue.js 2 Router example given in README.md. And I modified the routes as follows:

import Home from './Home.vue'
import Contact from './Contact.vue'
const router = new VueRouter({
  routes: [
    {path: '/', component: Home},
    {path: '/', component: Contact},
    // use lazy loading
    {path: '/about', component: () => import ('./components/About.vue')},
]})

The building progress would stop at 95% emitting if there is a lazy-loading routes, even if this lazy-loading route will not be prerendered.

[JoshTheDerf]

What is your PrerenderSPAPlugin config?

[harrisoff]

What is your PrerenderSPAPlugin config?

I did not modify PrerenderSPAPlugin configs.

I pushed my changes to my repo.

[JoshTheDerf]

@harrisoff The problem is here: https://github.com/harrisoff/prerender-spa-plugin/blob/master/examples/vue2-webpack-router/src/main.js#L44

document.dispatchEvent(new Event('render-event'))

You need to wait to do this until after the lazy-loaded route loads.

[harrisoff]

@Tribex That sounds reasonable. But I just found that it built successfully after I used babel-plugin-syntax-dynamic-import, which had already been mentioned in vue router guide but I did not noticed. I pushed my changes to my repo, too, including dist directory.

By the way, there is another thing that I think maybe is relavant. In another project I triggered dispatchEvent before ajax, but I still got html files with data in it. I found that the prerender proccess was not instantaneously finished. There was a delay between the browser opening and closed, yet the thread did not wait. So ajax completed in these few seconds and datas was prerendered. My solution is place ajax in a setTimeout and set the timeout larger than the prerender delay. I couln't give src code. I didn't set renderAfterTime. I was using renderAfterDocumentEvent only. I don't know if there are options that can solve this 'issue' or it is indeed an issue.

[zydemail]

@Tribex I have installed babel-plugin-syntax-dynamic-import and used in .babelrc, still have the same problem,And I used the babel-plugin-syntax-dynamic-import as follows: package.json: "babel-plugin-syntax-dynamic-import": "^6.18.0",

{
    "env": {
        "production": {
            "presets": [
                ["env", {
                    "targets": {
                        "browsers": ["last 2 version", "ie 10"]
                    },
                    "modules": false,
                    "debug": false
                }]
            ],
            "plugins": [
                "transform-runtime",
                "transform-object-rest-spread",
                "babel-plugin-syntax-dynamic-import",
                ["component", [
                    {
                    "libraryName": "mint-ui",
                    "style": true
                    }
                ]]
            ]
        },
        "development": {
            "presets": [
                ["env", {
                    "targets": {
                        "chrome": 60
                    },
                    "modules": false,
                    "debug": true
                }]
            ],
            "plugins": [
                "transform-object-rest-spread",
                "babel-plugin-syntax-dynamic-import",
                ["component", [
                    {
                    "libraryName": "mint-ui",
                    "style": true
                    }
                ]]
            ]
        }
    }
}

write routes as follows { name: 'about', path: '/mobile/about.html', component: () => import('./page/mobile/about/about.vue') } how to resolve the problem?

[pallamollasai]

The following code worked for me.

const HomeComponent = () => System.import('../components/user/HomeComponent') { name:"home", path:"/home", // HomeComponent component: HomeComponent }