react-vendoring

Guides edits to vendored React packages and react-server layer boundaries in Next.js.

Updated Feb 21, 2026
One-click install
npx skills add https://github.com/joySUSY/violet-plugin-place --skill react-vendoring-joysusy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vendoring
Source: https://github.com/joySUSY/violet-plugin-place/tree/main/plugins/frontend-dev/references/v3-expansion/react-vendoring
Command: npx skills add https://github.com/joySUSY/violet-plugin-place --skill react-vendoring-joysusy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Editing vendored React code in the Next.js codebase is error-prone: direct imports from react-server-dom-webpack outside entry-base.ts fail at runtime, type declarations live in a non-obvious file, and Turbopack silently remaps packages. This Skill encodes those rules so changes compile and run correctly. ## Core Features & Use Cases - Entry-base boundary enforcement: Explains that all react-server-dom-webpack/* imports must go through entry-base.ts, with other files accessing Flight APIs via the ComponentMod parameter. - Type declaration workflow: Shows how to add declare module blocks in packages/next/types/$$compiled.internal.d.ts when exposing new APIs like renderToPipeableStream. - Vendoring and channel knowledge: Covers the copy_vendor_react task in taskfile.js, stable vs experimental channels in compiled/react*, and Turbopack's remap to react-server-dom-turbopack. - Use Case: When adding a Node.js-only React API such as prerenderToNodeStream, follow the documented steps: add the type declaration, export it from entry-base.ts behind a process.env guard, and consume it through ComponentMod. ## Quick Start Ask how to safely add a new react-server-dom-webpack server.node API to the Next.js App Router build.

Frequently Asked Questions about react-vendoring

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

FAQPage Schema
How do I import react-server-dom-webpack APIs in Next.js source code?▼

All react-server-dom-webpack imports must go through entry-base.ts, the only file compiled in the react-server layer. Other files like app-render.tsx access Flight APIs via the ComponentMod parameter exposed through the app-page.ts build template.

How to add a new Node.js-only React API to Next.js App Router?▼

Add a declare module block in packages/next/types/$$compiled.internal.d.ts, export the API from entry-base.ts behind a process.env guard using a runtime require, then access it via ComponentMod in other files.

Why does importing react-server-dom-webpack fail with react-server condition error?▼

Direct imports outside entry-base.ts fail because only entry-base.ts is compiled in the react-server layer. Dev mode may mask the error, but production workers fail immediately with the react-server condition message.

Does Next.js App Router use React from node_modules?▼

No. App Router uses React vendored into packages/next/src/compiled/ during pnpm build via the copy_vendor_react task. Pages Router resolves React from node_modules normally.

Why do stack traces show react-server-dom-turbopack instead of webpack?▼

Turbopack's import map silently remaps react-server-dom-webpack/* to react-server-dom-turbopack/* at runtime. Source code says webpack everywhere, but Turbopack gets its own bindings, affecting debugging output.