Configure Vite to bundle all code into a single chunk using manualChunks,
preventing Alpine.js from being split into multiple modules that caused
"redeclaration of let Xo" errors during initialization.
This resolves the critical bug where Alpine.js would load twice on pages
using @Header, breaking all @click handlers and causing form buttons to
fall back to default browser behavior (unwanted navigation/form submission).
Technical details:
- The default Vite code-splitting was creating multiple ESM chunks
- Alpine's reactive system uses let Xo internally
- Multiple chunks caused Xo to be declared multiple times
- manualChunks() forces everything into a single bundle
Fixes #XXX (Alpine.js redeclaration error)
Created vite.config.ts with optimized settings for the Bookhoard project:
- Output directory: web/static/ (matches existing esbuild setup)
- Single entry point: web/src/main.ts
- Output file: main.js (preserves existing template references)
- ES2020 target for modern browser compatibility
- Source maps enabled for debugging
- esbuild minification for optimal bundle size
- emptyOutDir: false to preserve other static assets (htmx.min.js, CSS, images)
Configuration maintains the same build output structure as esbuild,
ensuring no changes needed to templates or deployment process.
john-okeefe