Vite 6 Bi-Directional Module Federation Shared Singleton & Edge Memory Isolation Standard

--- description: Vite 6 Bi-Directional Module Federation Shared Singleton & Edge Memory Isolation Standard - Enforces deterministic shared dependency resolution, strict singleton scoping, and context lifecycle isolation for Vite 6 bi-directional Module Federation. Prevents split-brain context corruption (e.g., duplicated React/Zustand instances) and cross-request memory leaks during edge-node SSR hydration. globs: vite.config.{ts,js}, src/**/*.{ts,tsx} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite6-mf-bidirectional-singleton-isolation-standard" --- # Vite 6 Bi-Directional Module Federation Shared Singleton & Edge Memory Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Lax Shared Dependency Declarations and Global Symbol Leaks in Bi-Directional Edge Remotes ## System Constraints You are a Principal Software Architect enforcing the Vite 6 Module Federation Bi-directional Shared Singleton Isolation Standard. You must mandate exact semver matching, strict singleton boundaries, and edge-safe runtime isolation across all federated hosts and remotes. Prevent silent multi-instance runtime instantiation and isolate scope leakage on edge workers. ## Strict Guidelines - Engineers MUST ALWAYS declare critical runtime dependencies ('react', 'react-dom', state stores, tracing contexts) with 'singleton: true', 'strictVersion: true', and explicit 'requiredVersion' tied directly to root package.json dependencies. - Engineers MUST NOT use string array shorthand (e.g., `shared: ['react', 'react-dom']`) in Vite 6 Module Federation configurations for stateful or context-providing libraries. - Code SHOULD initialize edge-rendered micro-frontends with an explicit scope namespace token to prevent shared memory pollution across concurrent worker invocations. - Services MUST ensure that bi-directional remotes acting simultaneously as hosts and remotes cleanly unregister event listeners and shared cache handles upon module remounting or worker disposal. - Components NEVER assume access to an ambient global context without executing runtime validation to assert that the resolved React/State instance matches the active host root singleton. ## Bad vs Good Implementations ### Vite 6 Module Federation Configuration: Shared Singleton Definition #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring shared dependencies as simple strings allows Vite to silently bundle fallback versions if minor semver drifts occur, instantiating dual runtime contexts and leaking edge memory via isolated closures. ```typescript import { defineConfig } from 'vite'; import federation from '@originjs/vite-plugin-federation'; export default defineConfig({ plugins: [ federation({ name: 'remote_catalog', filename: 'remoteEntry.js', exposes: { './Catalog': './src/Catalog.tsx' }, // ANTI-PATTERN: String array lacks singleton guarantees and semver pinning. // Causes duplicate React contexts, silent store de-sync, and memory leaks on edge runtimes. shared: ['react', 'react-dom', 'zustand'] }) ] }); ``` #### Production Standard (Correct) > **Standard**: Explicitly marks runtimes as strict singletons matching root semver, halting execution rather than silently branching runtime memory when version mismatches occur. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; import pkg from './package.json' with { type: 'json' }; export default defineConfig({ plugins: [ federation({ name: 'remote_catalog', filename: 'remoteEntry.js', manifest: true, exposes: { './Catalog': './src/Catalog.tsx' }, shared: { react: { singleton: true, strictVersion: true, requiredVersion: pkg.dependencies.react }, 'react-dom': { singleton: true, strictVersion: true, requiredVersion: pkg.dependencies['react-dom'] }, zustand: { singleton: true, strictVersion: true, requiredVersion: pkg.dependencies.zustand } } }) ], build: { target: 'chrome89' // ensures modern edge-compatible top-level await } }); ``` ### Bi-directional Context Safe Consumer with Boundary Verification #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Fails to verify whether the imported store instance belongs to the active host singleton, causing subtle production bugs where user state is read as undefined or updates fail to propagate. ```typescript import React from 'react'; import { useSharedUserStore } from 'host_shell/SharedStore'; export const RemoteProfileWidget: React.FC = () => { // ANTI-PATTERN: Blindly consumes remote context across federated boundary. // If singleton resolution failed, this hook reads an uninitialized default store. const user = useSharedUserStore((state) => state.user); return <div>Welcome, {user.name}</div>; }; ``` #### Production Standard (Correct) > **Standard**: Enforces invariant runtime validation of the shared singleton instance before component consumption, failing fast if the federated module bridge produces a decoupled runtime context. ```typescript import React, { useId } from 'react'; import { useSharedUserStore } from 'host_shell/SharedStore'; export const RemoteProfileWidget: React.FC = () => { const instanceId = useId(); const store = useSharedUserStore; if (typeof store !== 'function' || !store.getState) { throw new Error( `[MF-ISOLATION-CRITICAL]: RemoteProfileWidget (${instanceId}) detected corrupted or uninitialized host singleton store.` ); } const user = useSharedUserStore((state) => state.user); React.useEffect(() => { return () => { // Mandatory cleanup to prevent edge isolate closure retention }; }, []); return <div>Welcome, {user?.name ?? 'Guest'}</div>; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Bi-Directional Module Federation Shared Singleton & Edge Memory Isolation Standard

Vite 6 Bi-Directional Module Federation Shared Singleton & Edge Memory Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic shared dependency resolution, strict singleton scoping, and context lifecycle isolation for Vite 6 bi-directional Module Federation. Prevents split-brain context corruption (e.g., duplicated React/Zustand instances) and cross-request memory leaks during edge-node SSR hydration. 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: Lax Shared Dependency Declarations and Global Symbol Leaks in Bi-Directional Edge Remotes 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	Lax Shared Dependency Declarations and Global Symbol Leaks in Bi-Directional Edge Remotes	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 critical runtime dependencies ('react', 'react-dom', state stores, tracing contexts) with 'singleton

Engineers MUST ALWAYS declare critical runtime dependencies ('react', 'react-dom', state stores, tracing contexts) with 'singleton: true', 'strictVersion: true', and explicit 'requiredVersion' tied directly to root package.json dependencies.

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.