Generate with error not found inside html file

[noelc10]

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 }
});

Any suggestions, advise and help is heavenly appreciated.

Thank you.

[iAli22]

did you fix it? I have the same problem, I search a lot but unfortunately, I didn't found solution to implement the Prerender plugin in laravel & vue project

[bpolaszek]

Same here, on a fresh vue-cli project using Universal Vue. Any ideas?

[noelc10]

@iAli22 sorry for the laaaateeee response, I didn't though, my last resort is to not include a pre-render from it to avoid the headache.

[noelc10]

@bpolaszek sorry for the laaaateeee response, I didn't though, my last resort is to not include a pre-render from it to avoid the headache.

but @bpolaszek @iAli22 try to replace the headless prop value to false maybe there's something will come up or fix the problem at your sides: renderer: new Renderer({ renderAfterTime: 5000, headless: false })