Skip to content

fix: add manualChunks to resolve TDZ error in production build#90

Open
epuerta9 wants to merge 1 commit into
mainfrom
fix/vite-tdz-error
Open

fix: add manualChunks to resolve TDZ error in production build#90
epuerta9 wants to merge 1 commit into
mainfrom
fix/vite-tdz-error

Conversation

@epuerta9
Copy link
Copy Markdown
Collaborator

@epuerta9 epuerta9 commented Jan 5, 2026

Summary

Fixes #82 - UI JavaScript Error: ReferenceError on /agents/default page

Problem Analysis

The production UI bundle was throwing a Temporal Dead Zone (TDZ) error:

Uncaught ReferenceError: Cannot access 'Se' before initialization

This error occurred because:

  1. The entire UI was bundled into a single large chunk (~3.2 MB)
  2. Circular dependencies between modules caused variable initialization order issues
  3. When JavaScript tried to access a variable before it was initialized, the TDZ violation occurred

Root Cause

In JavaScript, variables declared with let and const exist in a "Temporal Dead Zone" from the start of their scope until they are initialized. When Rollup/Vite bundles code with circular dependencies into a single chunk, the module evaluation order can cause some variables to be accessed before their initialization, triggering TDZ errors.

Solution

Added manualChunks configuration to ui/vite.config.ts to split the bundle into separate chunks:

Chunk Libraries Purpose
react-vendor react, react-dom, react-router-dom React core - loaded first
ui-vendor @radix-ui/*, lucide-react, recharts UI components - loaded after React
utils date-fns, clsx, tailwind-merge, zod Utility libraries

This ensures:

  • ✅ Proper module initialization order
  • ✅ Each chunk is evaluated independently
  • ✅ Circular dependencies within app code don't affect vendor libraries
  • ✅ Better caching - vendor chunks change less frequently

Files Modified

  • ui/vite.config.ts - Added manualChunks configuration

Testing Notes

  1. Build the UI: make build-ui or cd ui && npm run build
  2. Verify multiple chunk files are created in internal/ui/static/assets/
  3. Start the server: STN_DEV_MODE=true stn serve --local
  4. Navigate to http://localhost:8585/agents/default
  5. Confirm no JavaScript errors in browser console
  6. Verify the agents page renders correctly

Additional Benefits

  • Smaller main bundle size
  • Better browser caching (vendor chunks rarely change)
  • Improved initial load performance
  • Easier debugging of production issues

Fixes #82

The production UI bundle was experiencing a Temporal Dead Zone (TDZ) error
("Cannot access 'Se' before initialization") due to circular dependencies
being bundled into a single large chunk.

This fix adds manualChunks configuration to split the bundle:
- react-vendor: React core libraries (react, react-dom, react-router-dom)
- ui-vendor: UI component libraries (radix-ui, lucide-react, recharts)
- utils: Utility libraries (date-fns, clsx, tailwind-merge, zod)

Splitting the bundle ensures proper module initialization order and
prevents TDZ violations caused by circular dependencies.
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.

UI JavaScript Error: ReferenceError on /agents/default page

1 participant