skills.rest
JuanDiego30
JuanDiego30COMMUNITY
Explore all skills by this author →
GitHub

react-vendoring

Enforce react-server-dom-webpack imports through entry-base.ts for vendored React changes.

Updated Apr 14, 2026
Search Tags:#turbopack#app-router#react-server#entry-base#vendored-react#react-server-dom-webpack
One-click install
npx skills add https://github.com/JuanDiego30/cermont_aplicativo --skill react-vendoring-juandiego30
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vendoring
Source: https://github.com/JuanDiego30/cermont_aplicativo/tree/main/.agents/skills/react-vendoring
Command: npx skills add https://github.com/JuanDiego30/cermont_aplicativo --skill react-vendoring-juandiego30

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React vendoring and react-server layer boundaries introduce complexity in module resolution and surface area when editing vendored React code. This skill provides a structured approach to ensure changes go through the correct boundary points and maintain consistent behavior across App Router and server components.

Core Features & Use Cases

  • App Router Vendoring: vendored React channels (stable and experimental) are wired to Turbopack aliases; Pages Router resolves React from node_modules for standard cases.
  • Entry-base.ts Boundary: all react-server-dom-webpack/* imports must go through entry-base.ts; ensure safe access to Flight APIs via ComponentMod.
  • Type Declarations: update $$compiled.internal.d.ts to reflect new APIs; keep type surface in sync with vendored React.
  • ESLint Practical Rule: apply scoped disable/enable for dynamic requires to avoid lint/backwards compatibility issues.
  • Turbopack Remap: understand that Turbopack remaps the import to turbopack variants at runtime.
  • Use Case: apply this skill when editing vendored React or react-server layer boundaries to ensure correct module resolution and safe access to server APIs.

Quick Start

Apply changes to vendored React only through entry-base.ts and validate that all react-server-dom-webpack imports route via the React boundary.

Frequently Asked Questions about react-vendoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage react-server-dom-webpack imports safely in vendored React?▼

To manage react-server-dom-webpack imports safely in vendored React, route all imports through entry-base.ts. This boundary ensures safe access to Flight APIs via ComponentMod and maintains correct module resolution across server components.

What is the correct boundary for editing vendored React in the App Router?▼

The correct boundary for editing vendored React in the App Router is entry-base.ts. Applying changes through this boundary ensures consistent behavior and strict path usage when modifying the react-server layer.

How does Turbopack handle vendored React channels for the App Router?▼

Turbopack handles vendored React channels by wiring stable and experimental channels to Turbopack aliases. At runtime, Turbopack remaps the imports to turbopack variants to ensure correct module resolution.

Do I need to update type declarations when changing the vendored React surface area?▼

Yes, you need to update type declarations when changing the vendored React surface area. Update $$compiled.internal.d.ts to reflect new APIs and keep the type surface in sync with your vendored React modifications.

Why does Pages Router resolve React from node_modules instead of vendored channels?▼

Pages Router resolves React from node_modules for standard cases to maintain backwards compatibility. This differs from the App Router, which specifically wires vendored React channels to Turbopack aliases for experimental and stable releases.

What is the best way to handle dynamic requires in vendored React without lint issues?▼

The best way to handle dynamic requires in vendored React without lint issues is to apply scoped ESLint disable and enable rules. This approach prevents backwards compatibility problems while allowing necessary dynamic imports.

Related Skills

Explore More Software Engineering Skills→
hdkz-devhdkz-dev

nextjs15-optimizer

Optimize Next.js 15 apps with React 19 and Turbopack strategies.

Community
Advanced
ollieb89ollieb89

auth-systems

Implement authentication and authorization for Next.js App Router with Clerk or Better Auth.

Community
Advanced
sigitpoerwosigitpoerwo

react-vendoring

Enforce React vendoring rules for correct server boundary imports.

Community
Advanced
villa1villa1

react-vendoring

Enforce React vendoring boundaries through entry-base.ts in Next.js react-server workflows.

Community
Advanced