Skip to content

fix(web): use object-based manualChunks to prevent circular deps #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
m4dm4rtig4n merged 1 commit into from
Dec 5, 2025
Merged

fix(web): use object-based manualChunks to prevent circular deps #66

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 18 additions & 31 deletions apps/web/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,37 +30,24 @@ export default defineConfig(({ mode }) => {
entryFileNames: 'assets/[name]-[hash].js',
chunkFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]',
manualChunks(id) {
// Core React + React-dependent UI libs - must stay together
// @headlessui/react uses React.forwardRef, so it must be in the same chunk
if (id.includes('node_modules/react/') ||
id.includes('node_modules/react-dom/') ||
id.includes('node_modules/react-router-dom/') ||
id.includes('@headlessui/react')) {
return 'react-vendor';
}
// UI utilities - no React dependency
if (id.includes('lucide-react') ||
id.includes('clsx')) {
return 'ui-vendor';
}
// Charts - only on dashboard/consumption pages
if (id.includes('recharts')) {
return 'chart-vendor';
}
// Data fetching - loaded on most pages
if (id.includes('@tanstack/react-query') ||
id.includes('axios') ||
id.includes('zustand')) {
return 'query-vendor';
}
// Heavy dependencies - lazy loaded
if (id.includes('swagger-ui-react')) {
return 'swagger-ui';
}
if (id.includes('jspdf') || id.includes('html2canvas')) {
return 'pdf-vendor';
}
manualChunks: {
// Core vendor - all node_modules except heavy lazy-loaded ones
// Using object syntax prevents circular dependency issues
vendor: [
'react',
'react-dom',
'react-router-dom',
'@headlessui/react',
'@tanstack/react-query',
'axios',
'zustand',
'lucide-react',
'clsx',
],
// Charts - lazy loaded on dashboard/consumption pages
charts: ['recharts'],
// PDF generation - lazy loaded
pdf: ['jspdf', 'html2canvas'],
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The swagger-ui-react package was removed from the manual chunks configuration. In the previous configuration, it was explicitly chunked into a 'swagger-ui' chunk for lazy loading. Consider adding it back to maintain the same chunking strategy:

manualChunks: {
  vendor: [
    // ... existing dependencies
  ],
  charts: ['recharts'],
  pdf: ['jspdf', 'html2canvas'],
  'swagger-ui': ['swagger-ui-react'],
},

This ensures swagger-ui-react remains lazy-loaded separately, as it's a heavy dependency that may not be used on all pages.

Suggested change
pdf: ['jspdf', 'html2canvas'],
pdf: ['jspdf', 'html2canvas'],
// Swagger UI - lazy loaded, heavy dependency
'swagger-ui': ['swagger-ui-react'],

Copilot uses AI. Check for mistakes.
},
},
},
Expand Down