Error: Build failing using prerender-spa-plugin

Build fails when I attempt to npm run build when using prerender-spa-plugin. It looks like I’m facing pretty much the same issue described in #282.

I’ve also tried adding data-server-rendered="true" attribute to the root app element as suggested, but this did no good.

I’m on Windows 10 and my project setting is:

• node: 10.13.0
• npm: 6.4.1
• vue: 2.6.9
• @vue/cli-service: 3.5.1

The error mesage from npm run build command:

ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! a@0.1.0 build: vue-cli-service build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the a@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

My vue.config.js:

var path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins = [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/', '/about'],
          renderer: new Renderer({
            renderAfterElementExists: '#app',
            renderAfterTime: 5000
          })
        })
      ]
    }
  }
}

My package.json:

{
  "name": "a",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/eslint-config-prettier": "^4.0.1",
    "axios": "^0.18.0",
    "file-saver": "^2.0.1",
    "form-data": "^2.3.3",
    "js-yaml": "^3.12.1",
    "jsdom": "^13.2.0",
    "markdown-it": "^8.4.2",
    "markdown-it-anchor": "^5.0.2",
    "markdown-it-footnote": "^3.0.1",
    "nprogress": "^0.2.0",
    "prerender-spa-plugin": "^3.4.0",
    "turndown": "^5.0.3",
    "turndown-plugin-gfm": "^1.0.2",
    "vue": "^2.6.9",
    "vue-router": "^3.0.2",
    "vue-social-sharing": "^2.4.2",
    "vuetify": "^1.5.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.1",
    "@vue/cli-plugin-eslint": "^3.4.1",
    "@vue/cli-service": "^3.4.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.14.1",
    "eslint-plugin-vue": "^5.2.2",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.6.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[SageSanyue]

headless: true It helps me! Reference: https://juejin.cn/post/6844904178326700045#comment “在mac下设置了 headless: false 导致提示 Unable to prerender all routes! google 了一堆，告诉我说不能使用路由懒加载，其实造成这个报错的原因有很多，我是设置了headless: true 就好了 !”

[bobaekang]

Closing this issue because of the successful prerendering of the original app. Using the code in maoberlenher/how-to-pre-render-vue-powered-websites-with-webpack helped.

New project setting:

• node: 10.15.3
• npm: 6.9.0
• vue: 2.6.10
• @vue/cli-service: 3.5.1

Revised vue.config.js:

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

const productionPlugins = [
  new PrerenderSPAPlugin({
    staticDir: path.join(__dirname, `dist`),
    routes: [`/`, `/about`],
    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 PrerenderSPAPlugin.PuppeteerRenderer({
      inject: {},
      renderAfterElementExists: `[data-view]`
    })
  })
]

module.exports = {
  lintOnSave: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === `production`) {
      config.plugins.push(...productionPlugins)
    }
  }
}

Revised package.json:

{
  "name": "a",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/eslint-config-prettier": "^4.0.1",
    "axios": "^0.18.0",
    "file-saver": "^2.0.1",
    "form-data": "^2.3.3",
    "js-yaml": "^3.12.1",
    "jsdom": "^13.2.0",
    "markdown-it": "^8.4.2",
    "markdown-it-anchor": "^5.0.2",
    "markdown-it-footnote": "^3.0.1",
    "nprogress": "^0.2.0",
    "prerender-spa-plugin": "^3.4.0",
    "turndown": "^5.0.3",
    "turndown-plugin-gfm": "^1.0.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.2",
    "vue-social-sharing": "^2.4.2",
    "vuetify": "^1.5.7",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.1",
    "@vue/cli-plugin-eslint": "^3.4.1",
    "@vue/cli-service": "^3.4.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.3",
    "eslint-plugin-vue": "^5.2.2",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Revised main.js:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
// importing stuff...

import App from './App.vue'
import router from './router'
import store from './store/index'

// from maoberlenher/how-to-pre-render-vue-powered-websites-with-webpack
import injectInitialState from './services/inject-initial-state' 

Vue.config.productionTip = false
Vue.use(Vuetify)
// using stuff...

const app = new Vue({
  router,
  store,
  render: h => h(App)
})

if (window.__INITIAL_STATE__) store.replaceState(window.__INITIAL_STATE__)

router.beforeResolve(async (to, from, next) => {
  try {
    const components = router.getMatchedComponents(to)
    await Promise.all(components.map(x => x.fetch && x.fetch({ store })))

    if (window.__PRERENDER_INJECTED) injectInitialState(store.state)
  } catch (error) {
    console.log(error)
  }
  return next()
})

app.$mount(`#app`)

Revised views/Home.vue and views/About.vue

<template>
  <div data-view> <!-- adding "data-view" here -->
     <!-- omitted -->
  </div>
</template>

<script>
// omitted
</script>