Only two pages are getting pre-rendered properly

[gijsdb]

Hello,

I am trying to pre-render my Vue application using the following vue.config.js:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  configureWebpack: {
    plugins:
      process.env.NODE_ENV === 'production'
        ? [
            new PrerenderSPAPlugin({
              // Required - The path to the webpack-outputted app to prerender.
              staticDir: path.join(__dirname, 'dist'),
              // Required - Routes to render.
              routes: [
                '/',
                '/drinks',
                '/stockists',
                '/merch',
                '/contact',
                '/grants',
                '/fail',
                '/page-not-found',
              ],
              renderer: new Renderer({
                injectProperty: '__PRERENDER_INJECTED',
                inject: { foo: 'bar' },
              }),
            }),
          ]
        : [],
  },
};

It creates the correct dist folder with each page as it's own folder with an index.html. When I run it on http-server to test it, it all works properly but when checking the source code only the grants page and page-not-found page have actual HTML content. The other pages all have just the header tag with navigation and

We're sorry but website name doesn't work properly without JavaScript enabled. Please enable it to continue.

Am I doing something wrong? Please let me know if you need more information.

Thank you!