react-vendoring

Enforce React vendoring and server boundary rules through entry-base.ts.

142k|31.7k|Updated Oct 5, 2016
One-click install
npx skills add https://github.com/vercel/next.js --skill react-vendoring-vercel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-vendoring
Source: https://github.com/vercel/next.js/tree/main/.agents/skills/react-vendoring
Command: npx skills add https://github.com/vercel/next.js --skill react-vendoring-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams enforce correct vendoring of React and strict server-boundary rules by centralizing changes through the entry-base.ts layer and its associated compiled packages, ensuring consistent behavior across the React server and app environments.

Core Features & Use Cases

  • Vendored React management: ensures React is vendored into packages/next/src/compiled and that the App Router resolves React from the vendored sources rather than node_modules.
  • Boundary enforcement: guarantees all imports from react-server-dom-webpack go through entry-base.ts, preventing unsafe references outside the boundary.
  • Type declarations maintenance: updates $$compiled.internal.d.ts when new vendored APIs are added, keeping type surface accurate.
  • Turbopack remap guidance and ESLint suppression: documents how Turbopack remaps affect bindings and provides patterns for safe ESLint suppression for guarded requires.

Quick Start

Edit entry-base.ts and related vendored React packages to implement the required boundary rules.

Frequently Asked Questions about react-vendoring

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

FAQPage Schema
How do I enforce React vendoring and ensure the App Router resolves from compiled sources?

To enforce React vendoring, centralize changes through the entry-base.ts layer and ensure React is vendored into packages/next/src/compiled. This guarantees the App Router resolves React from vendored sources rather than node_modules, ensuring consistent server behavior.

What is the entry-base.ts boundary in React server environments?

The entry-base.ts boundary is a centralized import layer that guarantees all references to react-server-dom-webpack route through a single safe entry point. This prevents unsafe imports outside the boundary, maintaining strict React server ecosystem rules.

How do I update type declarations when adding new vendored React APIs?

When adding new vendored React APIs, update the $$compiled.internal.d.ts file to maintain an accurate type surface. This ensures type declarations remain synchronized with the compiled React packages and entry-base.ts boundary changes.

How do I handle ESLint suppression for guarded requires in Turbopack?

For guarded requires affected by Turbopack remaps, apply documented ESLint suppression patterns to safely bypass linting errors. This Skill provides specific guidance on how Turbopack remaps affect bindings and how to suppress them safely.

Does this approach work with Turbopack and react-server-dom-webpack?

Yes, this approach works with Turbopack and react-server-dom-webpack by centralizing imports through entry-base.ts. It specifically documents how Turbopack remaps affect bindings and ensures all react-server-dom-webpack references stay within the server boundary.

Why does my App Router resolve React from node_modules instead of vendored sources?

The App Router resolves React from node_modules when vendoring is not correctly enforced through entry-base.ts. To fix this, ensure React is properly vendored into packages/next/src/compiled and all imports route through the centralized boundary layer.