An issue has occurred with prerendering all routes in the application

I have encountered a challenge while trying to integrate the prerender-spa-plugin with Laravel 5.7 and Vue 2.6:

Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/mnt/c/laragon/w  ww/<project-folder>/resources/views/index.html' in '/mnt/c/laragon/  www/<project-folder>':
  Error: Can't resolve '/mnt/c/laragon/www/<project-folder>/resources  /views/index.html' in '/mnt/c/laragon/www/<project-folder>'
...

I was following a blog tutorial on Vue and Laravel implementation section:

Additionally, I set up my webpack.config.js file (located in the project root folder) by copying content from laravel-mix webpack.config.js along with code snippets from the tutorial:

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PrerenderSPAPlugin = require('prerender-spa-plugin')
var Renderer = PrerenderSPAPlugin.PuppeteerRenderer

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */
let mix = require('./node_modules/laravel-mix/src/index');

let ComponentFactory = require('./node_modules/laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: Mix.paths.root('resources/views/index.html'),
    inject: false
  })
);

module.exports.plugins.push(
  new PrerenderSPAPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: [ '/' ]
  })
);

The generated index.html file in the ./public folder displays the error mentioned above.

Answer №1

After encountering a problem with a poor connection while using vuejs with the VueCLI, I found a solution by rendering fewer pages. By simply commenting out some pages in the vue.config.js file, I was able to resolve the issue successfully.

Below is an excerpt from my vue.config.js file:

var PrerenderSpaPlugin = require('prerender-spa-plugin')
var path = require('path')

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return

    return {
      plugins: [
        new PrerenderSpaPlugin(
           // Absolute path to compiled SPA
          path.resolve(__dirname, 'dist'),
          // List of routes to prerender
          [ '/', 
            '/login',  
            '/whyRecruiters', 
            '/logoutinfo', 
            '/verifyemailinfo', 
            //'/deleteaccountinfo', 
          ],
        ),
      ]
    }
  }
}

Answer №2

Try this configuration:

headless: true

For more information, check out:

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

What is the best way to decrypt a Bcrypt-hashed password for the purpose of displaying it?

Currently developing an application that enables users to log in using a username/password combination. I have set up an Administrator account responsible for creating these user accounts, with the passwords being hashed before storing them in mySQL DB. Ho ...

What is the best method to retrieve information from a nested JSON array?

Whenever a user submits data, I receive it in a nested JSON array format and I must extract that information. For example, the data could range from question_1 to question_5 in one submission, and then from question_1 to question_9 in another submission. ...

Does vuetify have a v-autocomplete callback for when there is no filtered data available?

Is there a method to detect when the v-autocomplete component in Vuetify.js displays "no data available" after filtering? I have searched the events documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events Is there a workaround for this iss ...

Express Producing Empty Axios Post Request Body

I am facing an issue with sending two text data pieces from my React frontend to an Express backend. Whenever I use the post command with Axios, the body appears as {} in the backend and becomes unusable. Below is the code that I am using. Client (App.js) ...

What is the best way to showcase the output of a Perl script on a webpage

I recently came across a resource discussing the process of executing a perl script from a webpage. What is the best way to run a perl script from a webpage? However, I am facing a situation where the script I have takes more than 30 seconds to run and d ...

Combining shapes in three.js

I've encountered a scenario where my scene consists of multiple meshes, each with different shapes and sizes. By looping through each mesh and utilizing geometry.merge(), I successfully created a new mesh from the geometries in the scene. The challe ...

Creating a personalized class in Google Apps Script: a step-by-step guide

I'm trying to define a new class within my Google Apps Script. Even though the language is based on JavaScript, I encountered an issue while using an example from a JavaScript manual: class Polygon { constructor(height, width) { this.height = ...

What is the purpose of enveloping the BrowserRouter in a parent component as opposed to the routes child component for react router v6?

Attempting to implement the useRoutes hook from [email protected] for creating App routes in JavaScript, I organized my code as follows in routes.jsx: import { useRoutes } from "react-router-dom"; import TestPage from "../Pages/Public/T ...

Show me a way to use jQuery to show the number of images of a particular type that are on a

My webpage features 6 different images, including 4 of various balls such as basketball and baseball. One image is of a truck, while the last one is random. On the page, there is a form with two radio buttons allowing users to select which type of image c ...

Achieving Ajax Request Activation through Button Click in Bootstrap

I am currently working on a modal form using Bootstrap that allows users to customize a specific item before adding it to the cart. My issue is that the "Add to Cart" button does not trigger the Ajax request as intended. I have followed a modified version ...

Issue with Implicit Import Feature in TypeScript 2.1 Not Functioning as Expected

I was eagerly anticipating the release of TypeScript 2.1.4, as one of the major reasons my team decided to use TS was the convenience of importing installed modules without needing to search for or create type definitions, thanks to implicit any imports. H ...

I'm attempting to navigate the user to another page, but when using this.$router.push('/') I am receiving an error of undefined

I am facing an issue with redirection in my code. I want to redirect the user to the welcome page when they log out and to the home page when they log back in. However, when I use this.$router.push('/'), it gives me an undefined error message. B ...

Adding Data into Mysql Database Utilizing node.js

I am working with Node.js and I need to add multiple values to a table. For example: id | profile_id | user_id 1 | 2 | 7 2 | 2 | 3 3 | 2 | 4 4 | 2 | 6 I have an array containing all the user ids ...

Utilizing AJAX and JavaScript to parse JSON data that includes an array

I'm encountering an issue while trying to parse a JSON message received through an AJAX response on my webpage. Strangely, it keeps throwing the following error: "SyntaxError: JSON.parse: expected ',' or ']' after array eleme ...

Exploring the foundational element within a JSON structure

I'm trying to retrieve the album names of various artists from a JSON file located at this link. My current approach involves writing the following code: var json = JSON.parse(request.responseText); //parse the string as JSON var str = JSON.stringify ...

Automatically close the v-autocomplete dropdown after making a selection

I am currently using the vuetify v-autocomplete component and I am trying to make the dropdown close automatically after each selection or deselection. Here is the code snippet that I have implemented: <v-autocomplete v-model="ddselect" :items="ddi ...

Accessing Route Parameters from Any Component

If my URL follows this structure: /blog/[post_id]/something What's the best practice for passing $post_id to any component within the tree? I'm familiar with retrieving route parameters using getInitialProps, but I struggle with passing values ...

Exploring the Power of Elasticsearch with Datatables

I'm attempting to utilize functions from an Elasticsearch instance in conjunction with datatables to exhibit results. Currently, I am only able to display 10 results, regardless of the query used. Even though there are 141,000 results in Elasticsearc ...

Problem with the operation of SetInterval/ClearInterval loop

While I am aware that this question has been addressed previously, none of the solutions provided seemed to resolve my specific issue. The problem lies within my timer function which, upon invocation, is supposed to utilize setInterval to run every second ...

Using JavaScript to Filter XML Data within the DOM

I'm currently working on a project to enhance my JavaScript skills. I've successfully managed to retrieve data and display it in an HTML document using JavaScript. My next goal is to implement a search feature to filter through the list, but I en ...