Error: ENOENT: no such file or directory in Vue CLI 3

I’m getting the following error when trying to build:

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

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

File: 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',
          }),
        }),
      ],
    };
  },
};

I don’t have any routes, only a single index.html page.

Also, when I run yarn build and get that error, I try to kill the process in terminal but it keeps returning Building for production... without anything happening, and I have to quit terminal for it to stop.

Edit: I’ve also tried adding staticDir: path.join(__dirname, './public') but the build hangs without any errors.

[JoshTheDerf]

That might be your issue then, the plugin is waiting for your app to fire a DOM event, so if your app isn’t doing that, it will hang.

The most basic solution would be to replace renderAfterDocumentEvent: 'render-event' with renderAfterTime: 5000 or something like that. Not ideal, but should get you started.

[manuelgeek]

@JoshTheDerf thanks, for me, i had to add data-server-rendered="true" in my <div id="app" data-server-rendered="true"></div> and

renderer: new Renderer({
   renderAfterElementExists: '#app',
}),