Vite 6 Module Federation Isolated Dependency Singleton Standard

--- description: Vite 6 Module Federation Isolated Dependency Singleton Standard - Enforces strict singleton configuration and shared dependency isolation across Vite 6 federated remotes and hosts using modern Module Federation. Prevents dual-engine runtime collisions, broken React Context trees, invalid hook invocations, and desynchronized state stores caused by unconstrained ESM bundle resolution. globs: vite.config.{ts,js,mjs}, src/index.{ts,tsx}, src/bootstrap.{ts,tsx}, package.json alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-module-federation-isolated-singleton-standard" --- # Vite 6 Module Federation Isolated Dependency Singleton Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unpinned and Non-Singleton Federated ESM Dependencies Inducing Dual Runtime Instantiation and Broken React Context ## System Constraints You are a Principal Software Architect enforcing the Vite 6 Module Federation Isolated Dependency Singleton Standard. Mandate explicit singleton isolation, asynchronous bootstrap entry barriers, and strict dependency pinning across all federated boundaries. Reject any configuration that relies on implicit ESM deduping or permits duplicate framework runtime instances. ## Strict Guidelines - Engineers MUST ALWAYS declare core framework runtimes (e.g., 'react', 'react-dom') and state hubs (e.g., '@tanstack/react-query', 'zustand') as explicit objects with 'singleton: true' and pinned 'requiredVersion' constraints. - Engineers MUST NEVER use string array shorthands like shared: ['react', 'react-dom'] in Vite 6 federation configs; strict object definitions are required to prevent version drift. - Engineers MUST ALWAYS enforce an asynchronous bootstrap entry point (import('./bootstrap')) in the host and remote application roots to enable Module Federation runtime negotiation before application initialization. - Engineers MUST set 'strictVersion: true' for core runtimes in production to immediately fail fast during deployment verification rather than producing undefined hook behavior or silent state desynchronization. - Services MUST configure shared state clients (e.g., QueryClient, Redux stores) via inversion-of-control host context providers rather than letting remotes instantiate independent singletons. - Components NEVER import internal micro-frontend state singletons across federated boundary contracts without formal shared-interface type verification. ## Bad vs Good Implementations ### Vite 6 Module Federation Configuration: Loose Array vs Strict Singleton Map #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Using array-based shared dependencies fails to enforce singleton semantics and semver boundaries. Vite 6 resolves multiple distinct ESM bundles for 'react' and 'react-dom' between host and remotes, leading to broken React context and 'Invalid Hook Call' runtime failures. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; import pkg from './package.json'; export default defineConfig({ plugins: [ federation({ name: 'remote_catalog', filename: 'remoteEntry.js', exposes: { './Catalog': './src/Catalog.tsx', }, // ANTI-PATTERN: String arrays lack singleton, requiredVersion, and strictVersion constraints // In Vite 6 ESM resolution, this causes duplicate React runtimes and 'Invalid Hook Call' crashes shared: ['react', 'react-dom', '@tanstack/react-query'], }), ], }); ``` #### Production Standard (Correct) > **Standard**: Declaring each shared dependency with explicit 'singleton: true' and 'requiredVersion' derived from package.json ensures the Module Federation runtime negotiates a single common instance, preventing split React contexts and duplicate engine executions. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; import pkg from './package.json'; export default defineConfig({ plugins: [ federation({ name: 'remote_catalog', filename: 'remoteEntry.js', exposes: { './Catalog': './src/Catalog.tsx', }, shared: { react: { singleton: true, requiredVersion: pkg.dependencies.react, strictVersion: true, }, 'react-dom': { singleton: true, requiredVersion: pkg.dependencies['react-dom'], strictVersion: true, }, '@tanstack/react-query': { singleton: true, requiredVersion: pkg.dependencies['@tanstack/react-query'], strictVersion: false, }, }, }), ], build: { target: 'chrome89', }, }); ``` ### Application Entry Point: Synchronous Crash vs Asynchronous Bootstrap Boundary #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Synchronously importing and evaluating React prior to yielding execution to the federated module loader bypasses Vite 6 runtime dependency negotiation, guaranteeing eager duplicate instantiation. ```typescript // src/main.tsx // ANTI-PATTERN: Direct synchronous rendering prevents Module Federation from resolving // asynchronous shared chunks before React executes, triggering undefined singleton module crashes. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.createRoot(rootElement).render( <React.StrictMode> <App /> </React.StrictMode> ); } ``` #### Production Standard (Correct) > **Standard**: Dynamic import of bootstrap.tsx creates an essential chunk boundary, allowing the Module Federation runtime to negotiate shared singletons before the UI tree hydrates. ```typescript // src/main.tsx // Architectural Invariant: Asynchronous bootstrap barrier ensures federated shared scope // is fully initialized before the framework core executes. import('./bootstrap').catch((error: unknown) => { console.error('Failed to initialize federated bootstrap:', error); }); // src/bootstrap.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.createRoot(rootElement).render( <React.StrictMode> <App /> </React.StrictMode> ); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Module Federation Isolated Dependency Singleton Standard

Vite 6 Module Federation Isolated Dependency Singleton Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict singleton configuration and shared dependency isolation across Vite 6 federated remotes and hosts using modern Module Federation. Prevents dual-engine runtime collisions, broken React Context trees, invalid hook invocations, and desynchronized state stores caused by unconstrained ESM bundle resolution. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unpinned and Non-Singleton Federated ESM Dependencies Inducing Dual Runtime Instantiation and Broken React Context Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Unpinned and Non-Singleton Federated ESM Dependencies Inducing Dual Runtime Instantiation and Broken React Context	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS declare core framework runtimes (e.g., 'react', 'react-dom') and state hubs (e.g., '@tanstack/react-query', 'zustand') as explicit objects with 'singleton

Engineers MUST ALWAYS declare core framework runtimes (e.g., 'react', 'react-dom') and state hubs (e.g., '@tanstack/react-query', 'zustand') as explicit objects with 'singleton: true' and pinned 'requiredVersion' constraints.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.