Description
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:
-
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.
-
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
- Add authentication middleware in the server directory
- Set up content collection with markdown documents
- Build for production
- 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
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)