react-vendoring

Use this skill for changes touching vendored React, react-server-dom-webpack/*, or react-server layer boundaries.

vercel/next.js|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

Documentation

Installation Guide

Select your AI agent

How to use react-vendoring on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add react-vendoring

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/vercel/next.js --skill react-vendoring

Fetches react-vendoring from vercel/next.js and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/react-vendoring

Restart Cursor to activate react-vendoring. Access via /react-vendoring in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

App Router Vendoring

React is NOT resolved from node_modules for App Router. It's vendored into packages/next/src/compiled/ during pnpm build (task: copy_vendor_react() in taskfile.js). Pages Router resolves React from node_modules normally.

Two channels: stable (compiled/react/) and experimental (compiled/react-experimental/). The runtime bundle webpack config aliases to the correct channel via makeAppAliases({ experimental }).

entry-base.ts Boundary

Only entry-base.ts is compiled in rspack's (react-server) layer. ALL imports from react-server-dom-webpack/* (Flight server/static APIs) must go through entry-base.ts. Other files like stream-ops.node.ts or app-render.tsx must access Flight APIs via the ComponentMod parameter (which is the entry-base.ts module exposed through the app-page.ts build template).

Direct imports from react-server-dom-webpack/server.node or react-server-dom-webpack/static in files outside entry-base.ts will fail at runtime with "The react-server condition must be enabled". Dev mode may mask this error, but production workers fail immediately.

Type Declarations

packages/next/types/$$compiled.internal.d.ts contains declare module blocks for vendored React packages. When adding new APIs (e.g. renderToPipeableStream, prerenderToNodeStream), you must add type declarations here. The bare specifier types (e.g. declare module 'react-server-dom-webpack/server') are what source code in src/ imports against.

Adding Node.js-Only React APIs

These exist in .node builds but not in the type definitions. Steps:

Add type declarations to $$compiled.internal.d.ts.

Export the API from entry-base.ts behind a process.env guard.

Access it via ComponentMod in other files.

// In entry-base.ts (react-server layer) only: /* eslint-disable import/no-extraneous-dependencies */ export let renderToPipeableStream: ... | undefined if (process.env.__NEXT_USE_NODE_STREAMS) { renderToPipeableStream = ( require('react-server-dom-webpack/server.node') as typeof import('react-server-dom-webpack/server.node') ).renderToPipeableStream } else { renderToPipeableStream = undefined } /* eslint-enable import/no-extraneous-dependencies */ // In other files, access via ComponentMod: ComponentMod.renderToPipeableStream!(payload, clientModules, opts)

ESLint Practical Rule

For guarded runtime require() blocks that need import/no-extraneous-dependencies suppression, prefer scoped block disable/enable. If using eslint-disable-next-line, the comment must be on the line immediately before the require() call, NOT before the const declaration. When the const and require() are on different lines, this is error-prone.

react-vendoring

Documentation

Installation Guide

How to use react-vendoring on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

React Vendoring

App Router Vendoring

`entry-base.ts` Boundary

Type Declarations

Adding Node.js-Only React APIs

ESLint Practical Rule

Turbopack Remap

Related Skills

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

react-vite-best-practices

frontend-design

premium-frontend-ui

ui-animation

high-end-visual-design

antigravity-design-expert

Reviews

Discussion

react-vendoring

Documentation

Installation Guide

How to use react-vendoring on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

React Vendoring

App Router Vendoring

entry-base.ts Boundary

Type Declarations

Adding Node.js-Only React APIs

ESLint Practical Rule

Turbopack Remap

Related Skills

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

react-vite-best-practices

frontend-design

premium-frontend-ui

ui-animation

high-end-visual-design

antigravity-design-expert

Reviews

Discussion

`entry-base.ts` Boundary