Skip to content

Prerender triggers custom server middlewares during building #3341

Open
@royorange

Description

@royorange

Environment

  • Operating System: Docker
  • Node Version: v22.14.0
  • Nuxt Version: 3.16.1
  • CLI Version: 3.23.1
  • Nitro Version: 2.11.7
  • Package Manager: pnpm@10.6.5
  • Builder: -
  • Runtime Modules: @nuxt/content@3.4.0, @nuxt/ui@3.0.1, @vueuse/nuxt@13.0.0, @pinia/nuxt@0.10.1
  • Build Modules: -

Version

3.5.1

Reproduction

https://stackblitz.com/edit/nuxt-starter-ytmet9gf?file=package.json

run npm run build, an unexpected index.html is generated under .output/public/__nuxt_content/content/sql_dump/ which break the dump file

Description

When using @nuxt/content v3.5.1 in a production environment, I've discovered some critical issues:

  1. Server Middleware Interference with Content Build: During the Nuxt Content build process, server middleware authentication code is unexpectedly triggered (because of the prerender), causing the generated SQL dump to be corrupted (my scene is to redirect to the login site). This leads to the Base64 decoding error in the browser when trying to load the content collection.

  2. Error file cached in the localstorage: The wrong sql_dump file cached in the localStorage, so even I updated the site, because the checksum returns the same result, the website will not be corrected only when the user clear the localstorage.

Steps to Reproduce:

Create a Nuxt app with @nuxt/content v3.4.0

  1. Add authentication middleware in the server directory
  2. Set up content collection with markdown documents
  3. Build for production
  4. Try to access content in the browser via queryCollectionNavigation or similar methods
    Error appears in console: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

It works after I added some condition like:

export default defineEventHandler(async (event) => {
  const url = getRequestURL(event)
  if (import.meta.server && process.env.NODE_ENV !== 'production'){
    return
  }
  if (authFailed) {
    return sendRedirect(event, '/login', 302)
  }
  ..... 
})

I think when building the project, since the v3 is build with db, validate the dump file is necessary and can help debug some issue, cause its really cost me large time to find why the content is missing.
It's also necessary to check or clear the cache when decompression the db failed.

Additional context

I closed the minify and added some logs when calling the method like:

const { data: navigation, status, error } = await useAsyncData('docs-navigation', () => queryCollectionNavigation('docs'))

and when i check the output directory, the sql_dump has turned to some html strings

Image

Logs

Collection error: H3Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at decompressSQLDump (BikjZArz.js:14:38)
    at loadCollectionDatabase (BikjZArz.js:141:24)
    at async loadAdapter (BikjZArz.js:61:7)
    at async Object.all (BikjZArz.js:69:7)
    at async queryContentSqlClientWasm (Dv-FZBtf.js:680:16)
    at async generateNavigationTree (Dv-FZBtf.js:441:27)
    at async setup (B7DE7cKw.js:4206:18)Caused by: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at decompressSQLDump (BikjZArz.js:14:38)
    at loadCollectionDatabase (BikjZArz.js:141:24)
    at async loadAdapter (BikjZArz.js:61:7)
    at async Object.all (BikjZArz.js:69:7)
    at async queryContentSqlClientWasm (Dv-FZBtf.js:680:16)
    at async generateNavigationTree (Dv-FZBtf.js:441:27)
    at async setup (B7DE7cKw.js:4206:18)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions