vue-cli-plugin-prerender-spa generate with error not found inside html file

Question

I have installed this plugin on my laravel-vue app and setup the config inside laravel mix's webpack.mix.js file.

Now, when I run it via npm(I use watch, dev, and prod for this issue), It rendered without errors. But the rendered html file contains error test inside title tag and not found inside pre tag: http://prntscr.com/owcj6e

here's my setup:

webpack.mix.js:

mix.webpackConfig({
    plugins: [
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, "dist"),
            routes: ["/", "/bulletin-board","/top-requests","/about-us","/sign-in"],
            postProcess(renderedRoute) {
                renderedRoute.html = renderedRoute.html
                    .replace(/<script (.*?)>/g, `<script $1 defer>`)
                    .replace(`id="app"`, `id="app" data-server-rendered="true"`)

                return renderedRoute
            },
            renderer: new Renderer({
                renderAfterTime: 5000,
                headless: true
            })
        })
    ]
});

resources/js/routes.js


import Router from 'vue-router';

export const router = new Router({
    mode : "history",
    routes : [
        {
            path    :   "/",
            name    :   "index",
            component   :   require("./client/Home.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/home",
            name    :   "home",
            redirect    :   "/",
            meta    :   { guest: true }
        },
        {
            path    :   "/my-account",
            name    :   "my-account",
            component   :   require("./client/MyAccount.vue").default,
            meta    :   { auth: true }
        },
        {
            path    :   "/bulletin-board",
            name    :   "bulletin-board",
            component   :   require("./client/BulletinBoard.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/top-requests",
            name    :   "top-requests",
            component   :   require("./client/TopRequests.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/about-us",
            name    :   "about-us",
            component   :   require("./client/AboutUs.vue").default,
            meta    :   { guest: true }
        },
        {
            path    :   "/privacy-policy",
            name    :   "privacy-policy",
            meta    :   { guest: true },
            component   :   require("./client/PrivacyPolicy.vue").default
        },
        {
            path    :   "/sign-in",
            name    :   "sign-in",
            component   :   require("./client/Login.vue").default
        },
        {
            path    :   "*",
            name    :   "404",
            meta    :   { guest: true },
            component   :   require("./components/404.vue").default
        }
    ]

});

router.beforeEach((to, from, next) => {

    if(to.matched.some(record => record.meta.guest)) {
        next()
    }else if( to.matched.some(record => record.meta.auth )) {
        if( localStorage.getItem('soundlaunch.user') == null ) {
            next( { name : "sign-in" })
        }else{
            next()
        }
    }else{
        next()
    }
})

resources/js/app.js

require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {router} from './routes.js';
import {store} from './store.js';
import VueSweetalert2 from 'vue-sweetalert2';

import App from './App.vue';

import Client from './layouts/Client.vue';
import Admin from './layouts/Admin.vue';

Vue.component('default-layout', Client);
Vue.component('sidebar-layout', Admin);

Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueSweetalert2);

const app = new Vue({
    el: '#app',
    router,
    store,
    components : {
        App
    },
    refreshData : { enabled : false }
});

I have also file my issue here: https://github.com/SolarLiner/vue-cli-plugin-prerender-spa/issues/42

Any suggestions, advise and help is heavenly appreciated.

Thank you.

rdhainaut rdhainaut · Accepted Answer · 2019-09-12T12:02:39

It looks like a little naive but in your PrerenderSplaPlugin config you should use headless false to see if your page is correctly loaded with content. It could be a starting point.

renderer: new Renderer({
  headless: false
})

vue-cli-plugin-prerender-spa generate with error not found inside html file

1 Answers