Skip to content

Conversation

@m4dm4rtig4n
Copy link
Contributor

Summary

Fixes production error: "Cannot read properties of undefined (reading 'forwardRef')"

The previous fix (#65) only moved @headlessui/react but didn't solve the root cause: circular dependencies between chunks (react-vendorchart-vendorreact-vendor).

Solution

Switch from function-based to object-based manualChunks syntax, consolidating all core dependencies into a single vendor chunk. This eliminates circular dependencies.

Changes

  • react-vendor, ui-vendor, query-vendor → single vendor chunk
  • chart-vendorcharts chunk (lazy loaded)
  • pdf-vendorpdf chunk (lazy loaded)

🤖 Generated with Claude Code

The function-based manualChunks was creating circular dependencies
between chunks (react-vendor importing from chart-vendor). This caused
race conditions where React.forwardRef could be undefined when
ui-vendor loaded before react-vendor finished initializing.

Switch to object-based syntax which Rollup handles more safely,
consolidating all core dependencies into a single vendor chunk.

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

Co-Authored-By: Claude <[email protected]>
Copilot AI review requested due to automatic review settings December 5, 2025 00:33
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes a production error ("Cannot read properties of undefined (reading 'forwardRef')") by switching from function-based to object-based manualChunks syntax in the Vite configuration, eliminating circular dependencies between chunks.

Key changes:

  • Consolidates react-vendor, ui-vendor, and query-vendor into a single vendor chunk
  • Maintains separate lazy-loaded chunks for charts (recharts) and PDF generation (jspdf, html2canvas)
  • Uses object-based syntax to prevent circular dependency issues

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

// 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.
@m4dm4rtig4n m4dm4rtig4n merged commit 61de93a into main Dec 5, 2025
10 checks passed
@m4dm4rtig4n m4dm4rtig4n deleted the fix-forwardref-chunk-error branch December 18, 2025 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants