Nuxt Crashes During Prerendering with Vuefire Module

[santiagoaloi]

Steps to reproduce the bug

When I set any route as prerender in my Nuxt project using the Vuefire module, the build process crashes with the error [error] Exiting due to prerender errors.

This is the last part of the build process logs:

[success] Server built in 16193ms
[info] [nitro] Initializing prerenderer
[info] [nitro] Prerendering 3 routes
[log] [nitro]   ├─ /200.html (38ms)
[log] [nitro]   ├─ /404.html (39ms)
[log] [nitro]   ├─ / (329ms)
  │ └── Error: [500] 
[log] [nitro] 
Errors prerendering:
[log] [nitro]   ├─ / (329ms)
  │ └── Error: [500] 
[log] [nitro]
[error] Exiting due to prerender errors.
  at prerender (node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/nitropack/dist/chunks/prerender.mjs:220:11)
  at async node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]_gppxocoomzfsxvbdqogcmlu5wy/node_modules/nuxt/dist/index.mjs:3540:7
  at async build (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]_gppxocoomzfsxvbdqogcmlu5wy/node_modules/nuxt/dist/index.mjs:5333:5)
  at async Object.run (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/build.mjs:94:5)
  at async runCommand$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1648:16)
  at async runCommand$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1639:11)
  at async runMain$1 (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1777:7) 

Expected behavior

The build process completes successfully without any errors. When no routes are set to be prerendered, the build completes without errors.

Actual behavior

The build process crashes with the error [error] Exiting due to prerender errors.

Additional information

  "dependencies": {
    "@firebase/app-types": "^0.9.2",
    "firebase": "^10.12.2",
    "firebase-admin": "^11.11.1",
    "firebase-functions": "^4.9.0",
    "nuxt": "^3.12.2",
    "nuxt-vuefire": "^1.0.2",
    "vuefire": "^3.1.23",
  }

------------------------------
- Operating System: Darwin
- Node Version:     v22.2.0
- Nuxt Version:     3.12.2
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  [email protected]
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -
------------------------------

import { config } from 'dotenv'
const nodeEnviroment = process.env.NODE_ENV // 'development' or 'production'
const productionOnly = nodeEnviroment === 'production'

// Load all environment variables from .env files
// config({ path: `.env.production` })
config({ path: `.env.${nodeEnviroment}` })

export default defineNuxtConfig({
  ssr: true,

  future: {
    compatibilityVersion: 4,
  },

  experimental: {
    compileTemplate: true, // https://github.com/vuejs/vuefire/pull/1525
  },

  modules: [
    'nuxt-vuefire',
  ],

  vuefire: {
    auth: {
      enabled: true,
     },

    config: {
      apiKey: '*****',
      authDomain: '*****',
      databaseURL:  '*****',
      projectId: '*****',
      storageBucket:  '*****',
      messagingSenderId: '*****',
      appId: '*****',
      measurementId: '*****',
    },
  },

  nitro: {

    preset: 'node', // the default

    // Enable static rendering in production mode. This can help improve
    // performance, but it can also cause issues with image paths in
    // development mode. Therefore,only enable it in production mode.

    static: productionOnly,

    // Disable link crawling for pre-rendering. This can help speed up
    // build times if we have a lot of pages, but it means that we'll
    // need to manually specify which pages to pre-render.

    prerender: {
      crawlLinks: false,
      ignore: [
        path => ['/app', '/auth', '/jobs'].some(start => path.startsWith(start)),
      ],
    },

  },

  routeRules: {
    '/': { prerender: true },
    '/app/**': { ssr: false },
    '/auth/**': { ssr: false },
  },

})

[santiagoaloi]

For anyone encountering this issue, the solution can be found here:

When deploying a Nuxt app using VueFire and not using Firebase hosting, but rather deploying elsewhere (e.g., Vercel), note that the GOOGLE_APPLICATION_CREDENTIALS in your .env file cannot reference a path to a file. Instead, you need to pass the entire service-account.json object contents to GOOGLE_APPLICATION_CREDENTIALS.

This adjustment is necessary when using any type of SSR mode. In my case, I had to manually add the environment variables in Vercel.

After making this change, the errors were resolved. I hope this helps someone facing a similar issue.