Attempting to successfully integrate the Prerender SPA Plugin with Vue.js CLI 3

Encountering an issue while attempting to build:

Building for production...Error: ENOENT: no such file or directory, stat '/Users/me/Code/project/index.html'

Software Package: "prerender-spa-plugin": "^3.1.0"

Location: vue.config.js:

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return;

    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname),
          routes: ['/'],
          minify: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true,
            keepClosingSlash: true,
            sortAttributes: true,
          },
          renderer: new Renderer({
            renderAfterDocumentEvent: 'render-event',
          }),
        }),
      ],
    };
  },
};

No other paths are defined, just a single index.html page.

Additionally, after running yarn build and encountering the error, attempts to terminate the process in terminal prove futile as it continuously displays Building for production... with no progress unless terminal is forcibly closed.

Edit: Trying to include

staticDir: path.join(__dirname, './public')
results in the build hanging indefinitely without any reported errors.

Answer №1

To improve your rendering options, consider including the parameter headless: false in your configuration. By doing this, a Chromium browser will be launched, displaying the specified array of routes. Access the inspector within the Chromium browser to identify potential errors that may appear in the console.

Answer №2

Make sure to review the main.js file and include the following code inside the created() function:

created() {
  document.dispatchEvent(new Event('render-event'));
}

Another potential issue that may arise is if the renderAfterDocumentEvent property is set to 'render-event'. This property dictates the event that triggers the renderer to start rendering pre-rendered pages. If this event isn't triggered by your application, the renderer might not render the pages correctly.

If the above steps don't resolve the issue, consider modifying your path:

staticDir: path.resolve('dist'),

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

The conditional statement of either/or

I need to create a button that changes based on whether checkboxes are checked. If none are checked, I want to show a disabled button. If one or more are checked, I want to display a different button. JavaScript $("#checkAll").change(function ( ...

`Heart-shaped loading bar in Reactjs`

Looking for help in creating a heart-shaped progress loader for a React project. I attempted using CSS but encountered issues with the progress not filling the entire heart design. Below is the code snippet I used. The progress should start from the bottom ...

Issue with starting React app using the "npm start" command

Upon the installation of a React App, I encountered a error message after executing the command "npm start" Cannot destructure property compile of 'undefined' or 'null'. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href=" ...

"Angular ng-repeat: Restrict all items from being interacted with, except

I have a collection of items, each wrapped in a div element. I am trying to display only the first item as enabled while disabling the rest. AngularJs angular.module('example', []) .controller('myCtrl', function Ctrl($scope) { $sc ...

React Native application fails to return any values from an asynchronous operation in App function

Completely new to React Native, this is my first attempt at coding. I'm struggling with returning jsx from my App() function due to an asynchronous operation within it. Here's the code that I believe clearly demonstrates my issue: import React fr ...

Exploring the Magic of ES6 Object Destructuring

Learning about ES6 destructuring is still new to me. I have encountered a scenario where I need to extract specific values from a nested object within an object. For instance - z = {g: 1, h: 2, i: {d1:5, d2:6, d3:7}} When attempting to destructure with ...

Disable Chrome's suggestions bar on your Android phone

I'm having trouble disabling spelling suggestions for an input box and everything I've tried so far hasn't worked. I've already used attributes like autocomplete="off", autocapitalize="off", and spellcheck="off" for the input field, bu ...

Is it necessary to store tokens in cookies, local storage, or sessions?

I am currently utilizing React SPA, Express, Express-session, Passport, and JWT. I find myself puzzled by the various client-side storage options available for storing tokens: Cookies, Session, and JWT/Passport. Is it necessary to store tokens in cookies, ...

Facing issues with installing Vue CLI on MacOS?

Having some trouble with installing Vue via npm (sudo npm install -g @vue/cli). I keep getting a bunch of warnings and errors that I can't quite figure out. It's confusing and I have no clue why it's happening... npm WARN deprecated <a h ...

What is the method for setting a function as the initial value of a state variable?

Here is a function I have: async function setAllValues(value) { await stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .forEach((row) => { temp = ...

Sending an array and an object simultaneously through a single ajax request

I previously inquired about passing an object to an ajax request for my rest service. Now I am wondering if it's possible to pass both an array and an object within a single ajax request. Any insights on this matter would be greatly valued. ...

Encountering an issue when running the 'cypress open' command in Cypress

I am working with a Testing framework using node, cypress, mocha, mochawesome, and mochawesome-merge. You can check out the project on this github repo. https://i.sstatic.net/ItFpn.png In my package.json file, I have two scripts defined: "scripts": { ...

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

Performing two simultaneous AJAX requests using tokeninput

I've been playing around with the tokeninput plugin and it's been working really well for me. However, I recently came across a new requirement - I need to make two separate ajax calls on the same input bar. Situation: My input bar is as follows ...

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

Can we retrieve props that have not been explicitly passed down?

How can I access the prop "showPopover" from the constructor or another method? This prop was originally created in a separate component and now that I've integrated it into this component, I'm looking for a way to easily retrieve and modify it. ...

vue-router default route for children

Currently, I am working on a Vue 2.x application and utilizing vue-router for routing purposes. In certain situations, I need to directly display a child vue. The template structure is as follows: | voice 1 | voice 2 | voice 3 | | submenu 1 | submen ...

Establishing express routing results in API call returning 404 error indicating resource not found

I need some clarification on how to configure my Express routing using app.use and router. My understanding is that I can create a router and then attach it to a route using app.use() to handle all routing related to that route. Can someone assist me in ...

Save pictures in MongoDB using GridFS or BSON format

As a newcomer to MongoDB, I am seeking advice on the best way to store images in the database. Gridfs and BSON seem to be the most common options, but I'm unsure about their respective pros and cons. The main difference I'm aware of is the 16MB s ...

Displaying text within an HTML table featuring a vibrant background

I'm having trouble printing a basic certificate that is formatted as an HTML table. There are a couple of frustrating issues I'm facing. 1) When I try to print the table using Chrome, my CSS changes are not being applied. 2) I can't seem to ...