Fix production build error with proper vendor chunk splitting

- Configure Vite to split vendor chunks (React, DOMPurify, video libs, Supabase)
- Add manual chunk configuration to prevent duplicate module bundling
- Clean Docker build cache and node_modules cache during build
- Update Dockerfile to force clean rebuilds

This should resolve the 'Identifier already declared' error in production
caused by DOMPurify's @xmldom dependency being bundled multiple times.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-02 11:21:39 +07:00
parent 2f7797803c
commit e6e3bc39d4
2 changed files with 32 additions and 4 deletions

View File

@@ -7,14 +7,14 @@ WORKDIR /app
# Copy package files # Copy package files
COPY package*.json ./ COPY package*.json ./
# Install dependencies # Install dependencies with clean install
RUN npm ci RUN npm ci --prefer-offline --no-audit --force
# Copy source code # Copy source code
COPY . . COPY . .
# Build the application # Clean any previous build artifacts and node_modules cache, then build
RUN npm run build RUN rm -rf dist node_modules/.cache && npm run build
# Production stage - Use a simple server that works with Coolify # Production stage - Use a simple server that works with Coolify
FROM node:18-alpine AS production FROM node:18-alpine AS production

View File

@@ -18,5 +18,33 @@ export default defineConfig(({ mode }) => ({
build: { build: {
// Disable minification completely to avoid variable conflicts // Disable minification completely to avoid variable conflicts
minify: false, minify: false,
// Prevent duplicate bundling of dependencies
rollupOptions: {
output: {
manualChunks: (id) => {
// Vendor chunks for better caching and deduplication
if (id.includes('node_modules')) {
// Group DOMPurify and its dependencies separately
if (id.includes('dompurify') || id.includes('@xmldom')) {
return 'vendor-dompurify';
}
// Group React separately
if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
return 'vendor-react';
}
// Group video libraries
if (id.includes('video.js') || id.includes('hls.js') || id.includes('plyr')) {
return 'vendor-video';
}
// Group Supabase
if (id.includes('@supabase')) {
return 'vendor-supabase';
}
// All other node_modules
return 'vendor';
}
},
},
},
}, },
})); }));