The process of generating vue-cli-plugin-prerender-spa encountered an issue where the error was not found within the

I have successfully integrated this plugin into my laravel-vue application and configured it within the laravel mix's webpack.mix.js file.

After running it via npm (using watch, dev, and prod modes), I encountered no errors. However, upon inspecting the rendered HTML file, I noticed error text inside the title tag and missing content inside the pre tag: http://prntscr.com/owcj6e

Here is 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 : [
        // Routes configuration here
    ]
});

router.beforeEach((to, from, next) => {
    // Route navigation logic here
})

resources/js/app.js

require('./bootstrap');
// Other imports and configurations here

const app = new Vue({
    el: '#app',
    // Vue initialization here
});

If you wish to check the detailed issue report, feel free to visit: https://github.com/SolarLiner/vue-cli-plugin-prerender-spa/issues/42

Your suggestions, advice, and assistance are greatly appreciated.

Many thanks.

Answer №1

While it may seem simplistic, consider adjusting the headless option in your PrerenderSplaPlugin configuration to false. This will allow you to check if your page is loading properly with content, serving as a potential troubleshooting step.

renderer: new Renderer({
  headless: false
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create an array in JSON format that includes a JavaScript variable, with the variable's value changing each time a mouse

var question="What is your favorite color?"; var option="red"; var col=[]; When the user clicks, the variable value changes and values should be pushed in a specific format. I am new to JavaScript, please help me with this. Thank you. //On click, the var ...

Getting into a slot within a nested component within the render function

Currently using Vue 3 and I have a component with a render() function structured like this: render() { return ( <my-component> <div ref="cont" slot="cont">content</div> <my-component> ) } In addition, w ...

React and React Native not synchronizing with authentication context

It seems like there is an issue with the AuthContext not updating properly. Despite logging at various points, the user is still not being set. Here's a glimpse of the code in question: App.tsx export default function App() { const { user, setUser ...

restructure array upon alteration of data

Here's the current structure of an array stored in a $scope variable: $scope.objects: [ {selected: true, description: 'string1'}, {selected: false, description: 'string2'}, {selected: true, description: 'string3'}, ...

What is the best way to manage the "keydown.esc" event in Vue3?

In my project, I have a <Parent> component that triggers the display of the <Modal> component by setting the variable showModal to true. The showModal variable is initialized in the setup(){} function of the <Parent> component. I am loo ...

Instructions for including packages in .vue files

Within the script section of my .vue file, I have the following code: <script> import get from 'lodash.get'; ... </script> Despite trying to import lodash.get, I keep encountering an error message stating ReferenceError: ge ...

What methods can I incorporate sophisticated logic into my dataform process?

Summary I am looking to enhance the functionality of my Dataform pipeline by introducing a layer of modularity (via JavaScript functions) that can identify when there is a disruptive change in the schema of my raw data source. This system would then autom ...

JavaScript Object DeclarationCreating Objects in JavaScript

In this scenario, I have the following code snippet. Upon calling the constructor, an object is created. When updating the fields, modifications are made as shown below. It's important to note that direct modification of the Comment() function is not ...

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

Currently, I have implemented a login system on my website. The process involves triggering an ajax request to a designated PHP script upon the user clicking the submit button. This script is responsible for logging in the user and responding with the mess ...

What is the best way to instantly validate a form in React before submitting?

Having trouble with my form validation. The issue is that after validating the form on submit, I have to click the submit button a second time to actually send it and see the console.log at the bottom of the file. Any ideas on what might be causing this a ...

Paste the formatted text from clipboard into the body of a react mailto link

I have a requirement for users to easily send a table via email by copying and pasting it into the subject line. You can view a live demo of this feature on CodeSandbox: copy and paste rich text Below is the function that allows users to copy and paste ri ...

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

Tips for formatting dates in Angular 6

I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows: 28.10.2018 10:09 However, I would like the date to change dynamically based on ...

Access an external URL by logging in, then return back to the Angular application

I am facing a dilemma with an external URL that I need to access, created by another client. My task is to make a call to this external URL and then return to the home page seamlessly. Here's what I have tried: <button class="altro" titl ...

Updating parent scope from modal component in Vue2

I am currently working on a modal component that takes input, creates a record on the backend, and upon successful response, I want to update an object in the parent scope with the received data. Although I have attempted to emit an event from the child c ...

Root scope digest trigger delay

When invoking $scope.$apply() ten times consecutively, it is expected that ten root scope digests will occur. If the call to $scope.$apply() is debounced so that the trailing call always completes, can we assume that the final state of the application rem ...

Vuejs app experiencing issues with finally() function not functioning properly

After completing a tutorial on this, I decided to implement what I learned. The tutorial showed me how to run a VueJS app successfully and use axios.then.catch.finally or this.form.then.catch.finally. However, when I added npm to my old project that had ...

Exploring the power of Vue.js: implementing radio buttons within a v-for iteration

I am currently working on implementing radio buttons to allow users to select one of the photos as their profile picture: <ul v-for="p in myPhotos"> <li> <div> <div> <div> photo id: {{p.imgId}} ...

Exploring connections between various objects using JavaScript

Currently, I am working with two sets of arrays: $scope.selectedEmployees = ["1001", "1002"]; $scope.selectedTasks = ["Task1", "Task2"]; My goal is to create an array of objects that combine employees and tasks in a many-to-many relationship. The length ...

Struggling to Personalize Kendo Calendar Month templates using Knockout Kendo JS Binding

I have made modifications to the Kendo Calendar Month Template Resource which can be found Here without utilizing knockout-kendo.js. The official Kendo Reference is available Here. The issue arises when I implement the following code in knockout-kendo.js ...