Vite 6 / Rolldown Micro-Frontend Federation Chunk Invariant Guardrail

--- description: Vite 6 / Rolldown Micro-Frontend Federation Chunk Invariant Guardrail - Enforces strict sub-resource integrity (SRI), singleton-instance runtime locking, and resilient version skew mitigation across distributed Module Federation remotes powered by Vite 6 and Rolldown. Prevents catastrophic chunk drift, dual-react runtime crashes, and man-in-the-middle poisoning across dynamically fetched remote entry points. globs: vite.config.ts, vite.config.mts, src/federation/**/*.{ts,tsx}, src/bootstrap.tsx, src/remotes.d.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite-6-rolldown-mfe-chunk-invariant-guardrail" --- # Vite 6 / Rolldown Micro-Frontend Federation Chunk Invariant Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Dynamic Unpinned Federation Manifest Ingestion with Split Singletons and Missing SRI Hashes ## System Constraints You are a Principal Software Architect enforcing deterministic module federation invariants under Vite 6 and Rolldown. You must mandate strict singleton sharing (e.g., react, react-dom, routing, state stores), mandatory Sub-Resource Integrity (SRI) validation during remote module fetching, and runtime version-skew fallback boundaries. Reject any dynamic import of remote chunks that bypasses signature verification or creates multiple runtime singletons. ## Strict Guidelines - Engineers MUST ALWAYS declare critical framework dependencies ('react', 'react-dom', state stores) with 'singleton: true' and 'strictVersion: true' in the federation configuration. - Engineers MUST NOT allow dynamic runtime imports of remote entrypoints without SHA-384 or SHA-512 sub-resource integrity hash validation against a pre-signed manifest. - Code SHOULD implement circuit-breaker Error Boundaries wrapping all federated chunk renders to isolate version-skew crashes and missing chunk chunks (HTTP 404/409) during zero-downtime rolling deploys. - Services MUST emit a locked 'federation-manifest.json' mapping exact remote chunk hashes and dependency semver contracts during the Vite 6/Rolldown build phase. - Components NEVER directly invoke raw 'import(/* @vite-ignore */ remoteUrl)' without routing through the hardened dynamic remote loader registry. ## Bad vs Good Implementations ### Module Federation Invariant Configuration with Strict Singletons and SRI Enforcement #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Omitting singleton flags causes multiple React instances to be instantiated across host and remote, throwing invariant violation #321 ('Invalid Hook Call'). Loading remote entries directly over CDN URLs without cryptographic integrity hashes exposes the application to supply-chain tampering and silent failure during chunk cache desynchronization. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; export default defineConfig({ plugins: [ federation({ name: 'host_app', remotes: { // CRITICAL BUG: Unvalidated raw remote URL, no SRI verification, no singleton locks remoteOrder: 'https://cdn.enterprise.io/remotes/remoteOrder/remoteEntry.js' }, shared: ['react', 'react-dom'] // Missing singleton: true and strictVersion: true }) ] }); ``` #### Production Standard (Correct) > **Standard**: Enforces deterministic singletons for React 19 to guarantee hook context coherence, consumes a cryptographically secure manifest rather than an unpinned JS script, and integrates automated SRI hash calculation to prevent MITM chunk tampering. ```typescript import { defineConfig } from 'vite'; import { federation } from '@module-federation/vite'; import sri from 'vite-plugin-subresource-integrity'; export default defineConfig({ build: { target: 'esnext', modulePreload: { polyfill: false } }, plugins: [ federation({ name: 'host_app', remotes: { remoteOrder: { type: 'module', name: 'remoteOrder', entry: 'https://cdn.enterprise.io/remotes/remoteOrder/federation-manifest.json', entryGlobalName: 'remoteOrder', shareScope: 'default' } }, shared: { react: { singleton: true, strictVersion: true, requiredVersion: '^19.0.0' }, 'react-dom': { singleton: true, strictVersion: true, requiredVersion: '^19.0.0' } } }), sri({ algorithms: ['sha384'], crossorigin: 'anonymous' }) ] }); ``` ### Runtime Remote Safe Loader with Version Skew Fallback and Error Boundary Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: When the remote team deploys a new release, existing client sessions holding stale chunk references will trigger unhandled chunk loading exceptions (MIME type mismatch / 404), completely crashing the React host root tree without fallback. ```typescript import React, { lazy } from 'react'; // ANTI-PATTERN: Direct dynamic remote import without error isolation or chunk retry const RemoteOrderView = lazy(() => import('remoteOrder/OrderView')); export function OrderContainer() { return <RemoteOrderView />; } ``` #### Production Standard (Correct) > **Standard**: Wraps the federated remote chunk with a dedicated class Error Boundary to catch version skew/chunk-hash mismatches, flushes stale cache storage, and guarantees the host application runtime remains operational even if the remote fails to load. ```typescript import React, { Component, lazy, Suspense, type ReactNode } from 'react'; interface BoundaryProps { fallback: ReactNode; children: ReactNode; } interface BoundaryState { hasError: boolean; } export class RemoteChunkErrorBoundary extends Component<BoundaryProps, BoundaryState> { override state: BoundaryState = { hasError: false }; static getDerivedStateFromError(): BoundaryState { return { hasError: true }; } override componentDidCatch(error: Error): void { // Log chunk mismatch / version skew telemetry console.error('[Federation Invariant] Chunk load failure detected:', error.message); } override render(): ReactNode { return this.state.hasError ? this.props.fallback : this.props.children; } } const SafeRemoteOrder = lazy(async () => { try { return await import('remoteOrder/OrderView'); } catch (error) { // Invalidate stale caches on chunk mismatch during rolling release if (typeof window !== 'undefined' && 'caches' in window) { const keys = await window.caches.keys(); await Promise.all(keys.map((k) => window.caches.delete(k))); } throw error; } }); export function OrderContainer(): React.JSX.Element { return ( <RemoteChunkErrorBoundary fallback={<div>Remote module unavailable due to ongoing upgrade. Please refresh.</div>}> <Suspense fallback={<div>Loading remote chunk...</div>}> <SafeRemoteOrder /> </Suspense> </RemoteChunkErrorBoundary> ); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 / Rolldown Micro-Frontend Federation Chunk Invariant Guardrail

Vite 6 / Rolldown Micro-Frontend Federation Chunk Invariant Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict sub-resource integrity (SRI), singleton-instance runtime locking, and resilient version skew mitigation across distributed Module Federation remotes powered by Vite 6 and Rolldown. Prevents catastrophic chunk drift, dual-react runtime crashes, and man-in-the-middle poisoning across dynamically fetched remote entry points. 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: Dynamic Unpinned Federation Manifest Ingestion with Split Singletons and Missing SRI Hashes 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	Dynamic Unpinned Federation Manifest Ingestion with Split Singletons and Missing SRI Hashes	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 framework dependencies ('react', 'react-dom', state stores) with 'singleton

Engineers MUST ALWAYS declare critical framework dependencies ('react', 'react-dom', state stores) with 'singleton: true' and 'strictVersion: true' in the 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.