Vite 6 Module Federation Isolation & SemVer Dependency Negotiation Standard

--- description: Vite 6 Module Federation Isolation & SemVer Dependency Negotiation Standard - Enforces strict runtime sandbox boundaries, scoped shared dependency singletons, and deterministic SemVer negotiation across heterogeneous Vite 6 micro-frontend remotes. Prevents runtime state collisions, dual framework instantiation, and cascading boundary crashes via isolated share scopes and error-contained remote resolution. globs: vite.config.ts, vite.config.mts, src/**/*.{ts,tsx}, src/remotes.d.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-module-federation-isolation-dependency-negotiation-standard" --- # Vite 6 Module Federation Isolation & SemVer Dependency Negotiation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unpinned Shared Dependencies and Direct Window Mutations Across Federated Boundaries ## System Constraints You are a Principal Software Architect enforcing Vite 6 Module Federation runtime isolation and dependency negotiation. You must mandate strict version checking, singleton constraints on stateful single-instance runtimes, explicit share scopes, and dynamic fault-tolerant remote loading boundaries. ## Strict Guidelines - Engineers MUST ALWAYS declare 'requiredVersion', 'singleton: true', and 'strictVersion: true' for state-sensitive runtime singletons (e.g., 'react', 'react-dom', state management contexts) within the Vite 6 Module Federation configuration. - Engineers MUST isolate remote CSS and runtime state into encapsulated namespaces or Shadow DOM contexts to prevent host-remote global scope contamination. - Engineers MUST NOT rely on unversioned array syntax (e.g., shared: ['react']) for federated dependencies; every shared dependency must explicitly state negotiation rules. - Engineers MUST wrap all dynamic remote component imports with dedicated Error Boundaries and React Suspense boundaries to isolate remote network or runtime failures from the host shell. - Engineers MUST NOT mutate or expose global state on the 'window' object across federated modules; all cross-remote communication must proceed via strictly typed custom events or isolated message buses. ## Bad vs Good Implementations ### Module Federation Configuration with SemVer Negotiation and Runtime Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring shared dependencies as simple strings without singleton flags, required versions, or strictVersion checks leads to silent fallback to multiple React runtime instances, breaking React context and hooks at runtime. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; export default defineConfig({ plugins: [ federation({ name: 'remote_app', filename: 'remoteEntry.js', exposes: { './Widget': './src/Widget.tsx', }, // CRITICAL VIOLATION: Array-based shared dependencies omit SemVer constraints, // causing dual React instantiation, hook crashes, and global context loss. shared: ['react', 'react-dom', 'zustand'], }), ], }); ``` #### Production Standard (Correct) > **Standard**: Defines explicit SemVer negotiation rules. Stateful dependencies like 'react' and 'react-dom' are enforced as strict singletons matching exact package.json versions, preventing dual-runtime loading. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; import packageJson from './package.json' with { type: 'json' }; export default defineConfig({ plugins: [ federation({ name: 'remote_app', filename: 'remoteEntry.js', manifest: true, exposes: { './Widget': './src/Widget.tsx', }, shared: { react: { singleton: true, requiredVersion: packageJson.dependencies.react, strictVersion: true, }, 'react-dom': { singleton: true, requiredVersion: packageJson.dependencies['react-dom'], strictVersion: true, }, zustand: { singleton: false, requiredVersion: packageJson.dependencies.zustand, }, }, }), ], build: { target: 'chrome89', }, }); ``` ### Fault-Tolerant Dynamic Remote Loader with Resilient Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly consuming a federated remote module without an asynchronous boundary and error boundary triggers an unhandled script load error if the remote fails or is unreachable, crashing the entire host app. ```typescript import React from 'react'; // CRITICAL VIOLATION: Static unhandled remote import directly mounts without isolation; // if remote host is down, the entire host application encounters an unhandled runtime error. import RemoteWidget from 'remote_app/Widget'; export const Dashboard: React.FC = () => { return ( <div> <h1>Host Dashboard</h1> <RemoteWidget /> </div> ); }; ``` #### Production Standard (Correct) > **Standard**: Wraps the federated remote component in React.lazy, Suspense, and a dedicated Error Boundary, ensuring the host shell continues executing even if the remote script fails to resolve or throws a runtime error. ```typescript import React, { Component, Suspense, type ErrorInfo, type ReactNode } from 'react'; interface ErrorBoundaryProps { fallback: ReactNode; children: ReactNode; } interface ErrorBoundaryState { hasError: boolean; } export class RemoteErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> { public override state: ErrorBoundaryState = { hasError: false }; public static getDerivedStateFromError(): ErrorBoundaryState { return { hasError: true }; } public override componentDidCatch(error: Error, errorInfo: ErrorInfo): void { console.error('Remote micro-frontend runtime failure:', error, errorInfo); } public override render(): ReactNode { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } } const RemoteWidget = React.lazy(() => import('remote_app/Widget')); export const Dashboard: React.FC = () => { return ( <main> <h1>Host Dashboard</h1> <RemoteErrorBoundary fallback={<aside>Remote service currently unavailable.</aside>}> <Suspense fallback={<div>Loading micro-frontend...</div>}> <RemoteWidget /> </Suspense> </RemoteErrorBoundary> </main> ); }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Module Federation Isolation & SemVer Dependency Negotiation Standard

Vite 6 Module Federation Isolation & SemVer Dependency Negotiation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict runtime sandbox boundaries, scoped shared dependency singletons, and deterministic SemVer negotiation across heterogeneous Vite 6 micro-frontend remotes. Prevents runtime state collisions, dual framework instantiation, and cascading boundary crashes via isolated share scopes and error-contained remote 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 Shared Dependencies and Direct Window Mutations Across Federated Boundaries 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 Shared Dependencies and Direct Window Mutations Across Federated Boundaries	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 'requiredVersion', 'singleton

Engineers MUST ALWAYS declare 'requiredVersion', 'singleton: true', and 'strictVersion: true' for state-sensitive runtime singletons (e.g., 'react', 'react-dom', state management contexts) within the Vite 6 Module Federation configuration.

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.