Fix: Exiting Due to Prerender Errors in Nuxt

What Causes This Error?

This error occurs during nuxi generate or when prerendering routes, indicating that one or more pages failed to render. The actual errors are logged above this message.

The Problem

npx nuxi generate
# [error] Error while prerendering /some-page
# [error] Cannot read properties of undefined (reading 'title')
# ...
# Exiting due to prerender errors.

The Fix

Step 1: Find the Actual Error

Look for error messages above “Exiting due to prerender errors”:

# Enable verbose output
DEBUG=nitro:prerender npx nuxi generate

Step 2: Common Fixes

Missing Data

<!-- pages/products/[id].vue -->
<script setup>
const route = useRoute()
const { data } = await useFetch(`/api/products/${route.params.id}`)

// ❌ Problem: data might be null during prerender
const title = data.value.title  // Error!

// ✅ Fix: Handle null/undefined
const title = data.value?.title || 'Product'
</script>

API Not Available

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // Provide fallback data during prerender
      routes: ['/'],
      crawlLinks: true,

      // Or ignore certain routes
      ignore: ['/api/**', '/admin/**']
    }
  }
})

Dynamic Routes Without Data

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'prerender:routes'(ctx) {
      // Fetch routes from API
      const products = await $fetch('/api/products')
      for (const product of products) {
        ctx.routes.add(`/products/${product.id}`)
      }
    }
  }
})

Common Error Types

1. Data Fetching Errors

<script setup>
const { data, error } = await useFetch('/api/data')

// ✅ Handle errors gracefully
if (error.value) {
  console.warn('Fetch failed:', error.value)
}

// ✅ Safe access
const items = data.value?.items ?? []
</script>

2. Missing Environment Variables

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // Provide defaults for prerender
      apiBase: process.env.API_BASE || 'https://api.example.com'
    }
  }
})

3. Browser-Only Code

<script setup>
// ❌ Wrong - window doesn't exist during prerender
const width = window.innerWidth

// ✅ Fix - check for client
if (process.client) {
  const width = window.innerWidth
}

// ✅ Or use onMounted
onMounted(() => {
  const width = window.innerWidth
})
</script>

4. External API Timeouts

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // Increase timeout for slow APIs
      crawlLinks: true,
      routes: ['/'],

      // Retry failed routes
      failOnError: false  // Continue despite errors
    }
  }
})

Debugging Prerender

Enable Verbose Logging

DEBUG=nitro:prerender npx nuxi generate

Check Specific Route

# Generate only one route to debug
npx nuxi generate --route /problem-page

Local API Server

# Run API locally during generate
npm run api &
npx nuxi generate

Configuration Options

Ignore Failing Routes

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      failOnError: false,  // Don't exit on errors
      ignore: [
        '/broken-page',
        '/api/**'
      ]
    }
  }
})

Route Rules

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Don't prerender certain routes
    '/dynamic/**': { prerender: false },
    '/admin/**': { ssr: false },

    // Prerender with specific settings
    '/static/**': { prerender: true }
  }
})

Custom Error Handling

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'prerender:generate'(route, _) {
      if (route.error) {
        console.error(`Failed to prerender ${route.path}:`, route.error)
      }
    }
  }
})

Fallback Content

Error Page

<!-- error.vue -->
<script setup>
const error = useError()
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

Catch-All Route

<!-- pages/[...slug].vue -->
<script setup>
const route = useRoute()
const { data } = await useFetch(`/api/pages/${route.params.slug.join('/')}`)

// Handle 404 gracefully
if (!data.value) {
  throw createError({
    statusCode: 404,
    message: 'Page not found'
  })
}
</script>

Quick Checklist

• Check error messages above “Exiting due to prerender errors”
• Handle null/undefined data with optional chaining
• Ensure APIs are available during build
• Use process.client for browser-only code
• Add failOnError: false if some errors are acceptable
• Use routeRules to skip problematic routes
• Run DEBUG=nitro:prerender for detailed logs