Vite 6 Rolldown Module Federation AST Boundary and Scope Isolation

--- description: Vite 6 Rolldown Module Federation AST Boundary and Scope Isolation - Enforces strict Rust-based AST graph separation in Vite 6 (Rolldown) to eliminate runtime global-scope pollution, duplicate vendor chunk execution, and multi-version framework instantiation across dynamic federated remotes. Guarantees that shared singleton runtimes (such as React or Vue context dispatchers) are pinned to immutable host scopes while dynamic exposed remotes use isolated chunk evaluation contexts. globs: vite.config.{ts,js,mjs}, src/federation/**/*.{ts,tsx}, src/bootstrap.{ts,tsx}, src/remotes.d.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/vite6-rolldown-module-federation-boundary-isolation" --- # Vite 6 Rolldown Module Federation AST Boundary and Scope Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Implicit Scope Leakage and Dual-Framework Instantiation via Unpinned Module Federation Sharing ## System Constraints You are a Principal Engineer enforcing Vite 6 Rolldown Module Federation Boundary Isolation. Mandate invariants that prevent global namespace bleed, enforce strict singleton resolution on shared dependencies across Rust AST module graphs, and verify chunk boundary sandboxing on all dynamically imported remotes. ## Strict Guidelines - Engineers MUST ALWAYS declare runtime-critical peer singletons ('react', 'react-dom', 'vue') with `singleton: true`, `strictVersion: true`, and an explicit `requiredVersion` range in the federation manifest. - Engineers MUST NOT import dynamically federated remote modules synchronously at the top-level entry point; an asynchronous chunk boundary bootstrap function MUST wrap the entire application initialization. - Vite 6 Rolldown build configurations MUST explicitly specify module federation chunk-splitting barriers to prohibit Rolldown's Rust bundler from inlining shared vendor modules into dynamic remote chunks. - Host containers MUST declare and initialize a shared Scope Guard to detect and intercept colliding symbol definitions or re-registrations on the global execution context (`window` or `globalThis`). - Dynamic remote consumers MUST validate the semantic contract and initialization health of loaded exposed modules using runtime type narrowing before mounting remote components into the DOM tree. ## Bad vs Good Implementations ### Federation Host Configuration: Rigid Singleton Boundaries vs. Implicit Vendor Bundling #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Implicit array configuration allows Rolldown's bundler to inline framework code if version ranges diverge by patch levels, creating two concurrent React runtime engines and crashing hooks with Invalid Hook Call errors. ```typescript import { defineConfig } from 'vite'; import federation from '@originjs/vite-plugin-federation'; export default defineConfig({ // BAD: Top-level unconstrained federation leaking vendor chunks plugins: [ federation({ name: 'host-app', remotes: { remoteApp: 'http://localhost:5001/assets/remoteEntry.js' }, // Missing strictVersion, singleton guarantees, or explicit Rolldown boundary hooks shared: ['react', 'react-dom'] }) ] }); ``` #### Production Standard (Correct) > **Standard**: Pins shared runtime dependencies to strict singletons matching exact host dependency manifests, directing Rolldown's module graph resolver to reject duplicate runtime evaluations at load time. ```typescript import { defineConfig } from 'vite'; import federation from '@originjs/vite-plugin-federation'; import pkg from './package.json' with { type: 'json' }; export default defineConfig({ plugins: [ federation({ name: 'host-app', remotes: { remoteApp: 'http://localhost:5001/assets/remoteEntry.js' }, shared: { react: { singleton: true, requiredVersion: pkg.dependencies.react, strictVersion: true }, 'react-dom': { singleton: true, requiredVersion: pkg.dependencies['react-dom'], strictVersion: true } } }) ], build: { target: 'esnext', modulePreload: false, rollupOptions: { output: { // Enforce isolated chunk evaluation context to prevent global scope bleeding format: 'esm' } } } }); ``` ### Entrypoint Bootstrap Boundary: Synchronous Contamination vs. Async Sandbox Invocator #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Synchronous imports of federated chunks before the shared dependency negotiation layer resolves cause Rolldown to resolve references prematurely, resulting in uninitialized singletons and undefined runtime factories. ```typescript // BAD: Direct synchronous entry execution import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import RemoteHeader from 'remoteApp/Header'; // Synchronous remote import pollutes AST graph const root = ReactDOM.createRoot(document.getElementById('root')!); root.render( <React.StrictMode> <RemoteHeader /> <App /> </React.StrictMode> ); ``` #### Production Standard (Correct) > **Standard**: Separates the module initialization phase from the runtime evaluation phase via an asynchronous bootstrap chunk, allowing Rolldown and Vite 6 to construct the shared dependency registry before running federated modules. ```typescript // GOOD: Isolated asynchronous entrypoint barrier pattern // index.ts: Initiates async import boundary import('./bootstrap').catch((error: unknown) => { console.error('Fatal: Failed to negotiate federated module graph', error); }); // bootstrap.tsx: Executed only after federation AST negotiated import React, { Suspense, lazy } from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const RemoteHeader = lazy(() => import('remoteApp/Header').then((module) => { if (typeof module.default !== 'function') { throw new Error('Remote component failed ABI boundary contract'); } return module; }) ); const container = document.getElementById('root'); if (!container) throw new Error('Root container missing'); ReactDOM.createRoot(container).render( <React.StrictMode> <Suspense fallback={<div>Loading Remote Chunk...</div>}> <RemoteHeader /> </Suspense> <App /> </React.StrictMode> ); ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Vite 6 Rolldown Module Federation AST Boundary and Scope Isolation

Vite 6 Rolldown Module Federation AST Boundary and Scope Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces strict Rust-based AST graph separation in Vite 6 (Rolldown) to eliminate runtime global-scope pollution, duplicate vendor chunk execution, and multi-version framework instantiation across dynamic federated remotes. Guarantees that shared singleton runtimes (such as React or Vue context dispatchers) are pinned to immutable host scopes while dynamic exposed remotes use isolated chunk evaluation contexts. 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: Implicit Scope Leakage and Dual-Framework Instantiation via Unpinned Module Federation Sharing 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	Implicit Scope Leakage and Dual-Framework Instantiation via Unpinned Module Federation Sharing	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 runtime-critical peer singletons ('react', 'react-dom', 'vue') with `singleton

Engineers MUST ALWAYS declare runtime-critical peer singletons ('react', 'react-dom', 'vue') with `singleton: true`, `strictVersion: true`, and an explicit `requiredVersion` range in the federation manifest.

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.