Cannot Access Before Initialization - React + Vite Production Build TDZ Crash (And How to Fix It) | AiVIS Cite Ledger Blogs

By · · 9 min read · TECHNOLOGY

The production build says "Cannot access 'lt' before initialization." Dev mode works fine. madge finds nothing. tsc passes. Here is what is actually happening and how to fix it in 30 seconds.

Key Takeaways

  • TDZ errors in production React builds show minified variable names that do not exist in source code.
  • Setting minify: false in vite.config.ts instantly reveals the real variable name behind the minified symbol.
  • useCallback dependency arrays evaluate eagerly during render, not lazily when the callback fires.
  • Dev mode uses native ESM which evaluates modules differently than Rollup production concatenation.
  • madge, TypeScript, and dev mode all report clean results for this class of bug.
  • ESLint no-use-before-define rule catches const references before declaration at lint time.
  • The fix is always declaration order - move the referenced callback above the referencing one.
  • Large components with 20+ hooks create invisible ordering constraints across hundreds of lines.

Article

Your React app works in dev. TypeScript passes. No circular dependencies. Then you deploy and the entire application crashes with a cryptic error pointing at a variable name you have never seen in your codebase.

This happened to us. In production. For hours.

The error was: **Cannot access 'lt' before initialization.**

There is no variable called `lt` anywhere in our source. It is a Rollup minification artifact. The real variable was `refreshServerHistory`, a useCallback buried 2400 lines deep in a dashboard component. The fix took one line to move. Finding it took the entire debugging playbook.

Here is everything we did, in order, so you can skip straight to the fix next time.

`reactjs` `vite` `rollup` `temporal-dead-zone` `production-build` `useCallback` `esbuild` `react-hooks`

---

The Symptom

Production build served via `vite preview` shows the React error boundary screen:

> Something went wrong - Cannot access 'lt' before initialization

Dev mode (`vite dev`) works perfectly. Hot reload, routing, everything. TypeScript `tsc --noEmit` passes clean. `madge --circular` across 300+ files finds zero cycles. The build itself completes without errors.

The app is completely unusable. Every page load crashes.

---

Why Traditional Debugging Fails

Three tools that developers reach for first all report "everything is fine."

**TypeScript** does not validate runtime evaluation order. It confirms your types are correct, not that your `const` declarations execute in a safe order.

**madge** checks for circular dependencies between files. This bug is a declaration ordering problem within a single file. The module graph is clean. The evaluation order inside one component is not.

**Dev mode** uses native ESM with on-demand module compilation. Each module evaluates independently. Production mode uses Rollup to concatenate and hoist declarations into shared scopes, where TDZ enforcement becomes strict.

The result: every diagnostic tool says "clean" while the app

Enable JavaScript for the full interactive reading experience with related articles and discussion.