Issues with prerender-spa-plugin functionality on the server

While attempting to build on the server, I encountered an error related to prerendering. Interestingly, this issue only seems to occur on the server-side, as desktop versions of ubuntu and macOS do not experience the same problem. I have tested this on multiple servers but still face the same issue.

95% emittingError: Failed to launch chrome!

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/home/phpuser/testPrerender/frontend/node_modules/puppeteer/lib/Launcher.js:255:14)
    at ChildProcess.helper.addEventListener (/home/phpuser/testPrerender/frontend/node_modules/puppeteer/lib/Launcher.js:245:60)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:194:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
[Prerenderer - PuppeteerRenderer] Unable to start Puppeteer
(node:2535) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'close' of null
(node:2535) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Below are my prerender-spa-plugin settings in webpack:

new PrerenderSPAPlugin({
    staticDir: _.outputPath,
    routes: ['/', '/abouts', '/mobile-apps', '/docs/service-fees', '/news', '/legal/Terms%20of%20use', '/legal/Refund%20policy', '/legal/Privacy%20Policy', '/legal/Notification%20o$',
    renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
      renderAfterDocumentEvent: 'render-event',
      headless: false,
    }),
  })
javascriptwebpackvue.jsurl-routingsingle-page-application

Answer №1

Encountering a similar problem, everything runs smoothly on my local machine but encounters an error on the server. As a temporary solution, I decided to decrease the number of routes being passed in the 

routes: []

Answer №2

Encountering a similar issue where npm run build is successful on my local machine but fails after deployment to the server. It seems like the problem may be linked to the puppeteer used in the prerender-spa-plugin 3.x version. (Source: https://qiita.com/pokotyan/items/11806b8b77f4a3527951) Since I could not modify the configuration on the CI, I opted to switch back to version 2.1.0. After making this change and using PhantomJS, the deployment was successful on the server.

vue-cli3 & "prerender-spa-plugin": "^2.1.0" vue.config.js

configureWebpack: {
    plugins: [
      new PrerenderSpaPlugin(
        // Absolute path to compiled SPA
        path.resolve(__dirname, './dist'),
        // List of routes to prerender
        ['/a', '/b', '/c', '/d', '/e'],
        {
          // options
          ignoreJSErrors: true,
        }
      )
    ],
}

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

Having trouble with jest mocking a function - it's not functioning as expected

I decided to create a simple test using jest to simulate a date change function. Here is the code snippet: import React from 'react'; import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react' ...

javascriptreactjsjestjs

Error encountered while attempting to execute uBlock Origin core in NodeJS: "snfe.useLists function not found"

Having completed the installation of the ubo-core package (npm install @gorhill/ubo-core) and including it in my project, I am encountering an issue with using the StaticNetFilteringEngine instance. This is my code snippet (ublock.mjs): async function rea ...

javascriptnode.jsnpm

Matching words with their meanings - exploring storage possibilities

I want to create a system to store vocabulary words and their translations in an organized manner... One idea I had was to use an associative array where each object represents a word and its translation. var vocab = []; vocab.push({"chinese" : "Nǐ", "e ...

javascriptjquerydata-structures

React: The issue with async and await not functioning as expected when using fetch

I am working with an API on a Node server that returns JSON data like this: {"result":[{"ProductID":1,"ProductName":"iPhone10","ProductDescription":"Latest smartphone from Apple","ProductQuan ...

javascriptjsonreactjsfetch-api

Unconventional way of assigning class properties in Typescript (Javascript): '?='

Recently, I came across the ?= assignment expression within a class property declaration. Can anyone provide some insight into what this means? I am familiar with the new Optional Chaining feature (object?.prop), but this particular syntax is unfamiliar t ...

javascripttypescriptexpression

What would be the best way to set up .replace(/./g, '_') to exclude spaces from being replaced?

After completing my first jQuery project, a simple hangman game featuring one-word book titles in the word bank, I am eager to enhance it to accommodate multi-word book titles. However, I am unable to find the necessary information to modify my code. Curr ...

javascriptjquery

Vue routing stops working when there is no hash in the URL (no designated input file)

I am facing the need to operate Vue router in its default mode, known as hash mode, and unable to use it in history mode. In this mode, all my dynamic routes have a leading hash, like http://myurl.com/#/highlights. However, removing that initial hash, such ...

javascriptvue.jsroutesurl-routingvue-router

Is it possible to manually remove an element after detaching it using jQuery?

I am curious about the necessity of manually deleting a detached element using jQuery's detach() function, even after all references to it have been set to null. Below is the JavaScript code I tried: For instance: elem = $(".test").detach(); elem = ...

javascriptjquery

Issue with implementing Alert component in React Hooks with Bootstrap

Currently, I am working on a project that allows users to nominate their favorite movies. As part of this project, I am trying to implement an alert message that will appear when the submit button is clicked to finalize all the nominations. {"return (" ...

javascriptreactjsbootstrap-4alerts

`initMap` does not exist as a function

Hey everyone, I need some help: I recently integrated the Google Maps API into my AngularJs project and encountered an error in the console: Uncaught message: "initMap is not a function" name: "InvalidValueError" This occurs when the Google Map API is ...

javascriptangularjsgoogle-maps

`Changing the background according to the page URL in React JS: A guide`

Looking to enhance my simple app with a few pages by changing the background color based on page URL using React.js. What I aim to achieve: If the pathname is /movies, I want the background color to be red. This is my current progress: import React, { ...

javascriptcssreactjsreact-router

Resolving schema by mapping array items

When using GraphQL, I successfully queried a single object on this Launchpad without any issues: However, I encountered an error when attempting to fetch an array of all "characters" with the same approach: "Expected Iterable, but did not find one for fi ...

javascriptreactjsgraphql

Exploring window event handling in Typescript (angular2)

Trying to capture events on the window object from an Angular 2 application written in TypeScript. Additionally, jQuery (imported via typings) is being used. The desired events are generated by an external library included using <script> tags in ind ...

javascriptjqueryangulartypescript

Is there a way to emphasize text within a string of object array items?

I am currently utilizing the data provided below to pass as props in React. The functionality is working smoothly, but I have a specific requirement to only emphasize the words "target audience" within the text property. Is there a feasible way to achieve ...

javascriptarraysreactjsstringobject

Using OPTIONS instead of GET for fetching Backbone JS model data

Currently, I am attempting to retrieve data from a REST endpoint with the help of a model. Below is the code snippet that I am using: professors: function(id) { professor = new ProfessorModel({ id: id }); professor.fetch({ headers: { ...

javascriptajaxresthttpbackbone.js

When the React.js app is launched on the server, it appears as a blank page, but functions perfectly when accessed locally

When I launch my React.js frontend locally with npm start, it runs smoothly. However, when attempting to run it on the server by using npm install followed by nom start, a blank page appears. Upon inspecting the public folder, I found the following conten ...

javascripthtmlreactjs

Having trouble getting ng-repeat orderBy to function in Angular?

I've attempted various ng-repeat examples with orderBy feature, but I seem to struggle making my JSON data compatible with it. <div ng-app> <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></scr ...

javascriptjsonangularjsangularjs-ng-repeat

Including an <a> tag within a JavaScript variable to utilize in an HTML statement

I want to wrap an <a> element around a JavaScript variable containing a string. The desired output should be the 'copyright symbol' followed by the 'companyName' linked as an HTML link and then the current year's date. JavaS ...

javascripthyperlink

Guide on incorporating a Bootstrap date time picker in an MVC view

Is there a live example available that demonstrates how to implement the latest Bootstrap date time picker in an MVC view? In my project, I have already included: - jQuery. - Bootstrap JS. - Bootstrap CSS. ...

javascripthtmljquerybootstrap-4datetimepicker

React Components Changing Route Leads to Empty Display

My current challenge involves setting up dynamic routing in my application to enable the viewing of products from different stores. Essentially, I am developing an app where users can add stores and browse through their items. I have implemented a dynamic ...

javascripthtmlcssreactjsreact-router