react-vendoring by vercel/next.js
npx skills add https://github.com/vercel/next.js --skill react-vendoring当变更涉及内嵌的 React、react-server-dom-webpack/* 或 react-server 层边界时,请使用此技能。
对于 App Router,React 并非从 node_modules 解析。它是在 pnpm build 过程中(任务:taskfile.js 中的 copy_vendor_react())被内嵌到 packages/next/src/compiled/ 目录下的。Pages Router 则正常从 node_modules 解析 React。
compiled/react/) 和实验版 (compiled/react-experimental/)。运行时包通过 在 webpack 配置中别名指向正确的通道。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
makeAppAliases({ experimental })entry-base.ts 边界只有 entry-base.ts 是在 rspack 的 (react-server) 层中编译的。所有从 react-server-dom-webpack/*(Flight 服务器/静态 API)的导入必须通过 entry-base.ts。其他文件如 stream-ops.node.ts 或 app-render.tsx 必须通过 ComponentMod 参数(这是通过 app-page.ts 构建模板暴露的 entry-base.ts 模块)来访问 Flight API。
在 entry-base.ts 之外的文件中直接导入 react-server-dom-webpack/server.node 或 react-server-dom-webpack/static 将在运行时失败,并提示 "The react-server condition must be enabled"。开发模式可能会掩盖此错误,但生产环境的 worker 会立即失败。
packages/next/types/$$compiled.internal.d.ts 包含用于内嵌 React 包的 declare module 块。当添加新的 API(例如 renderToPipeableStream、prerenderToNodeStream)时,必须在此处添加类型声明。裸说明符类型(例如 declare module 'react-server-dom-webpack/server')是 src/ 中源代码导入时所依据的。
这些 API 存在于 .node 构建中,但不在类型定义中。步骤如下:
$$compiled.internal.d.ts。entry-base.ts 中通过 process.env 守卫导出该 API。ComponentMod 访问它。// 仅在 entry-base.ts(react-server 层)中:
/* 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 */
// 在其他文件中,通过 ComponentMod 访问:
ComponentMod.renderToPipeableStream!(payload, clientModules, opts)
对于需要抑制 import/no-extraneous-dependencies 的受保护的运行时 require() 块,优先使用作用域块禁用/启用。如果使用 eslint-disable-next-line,注释必须紧接在 require() 调用行的前一行,而不是在 const 声明之前。当 const 和 require() 在不同行时,这很容易出错。
react-server-dom-webpack/* 会被 Turbopack 的导入映射静默地重映射为 react-server-dom-turbopack/*。代码中各处都写着 "webpack",但 Turbopack 在运行时获取其自己的绑定。这会影响调试:堆栈跟踪和错误信息将引用 turbopack 变体。
$flags - 标志连接(配置/模式/定义环境/运行时环境)$dce-edge - DCE 安全的 require 模式和边缘约束$runtime-debug - 复现和验证工作流每周安装量
315
代码仓库
GitHub 星标数
138.5K
首次出现
2026年2月17日
安全审计
安装于
gemini-cli302
opencode301
codex301
github-copilot300
kimi-cli298
amp297
Use this skill for changes touching vendored React, react-server-dom-webpack/*, or react-server layer boundaries.
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.
compiled/react/) and experimental (compiled/react-experimental/). The runtime bundle webpack config aliases to the correct channel via makeAppAliases({ experimental }).entry-base.ts BoundaryOnly 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.
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.
These exist in .node builds but not in the type definitions. Steps:
$$compiled.internal.d.ts.entry-base.ts behind a process.env guard.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)
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-server-dom-webpack/* is silently remapped to react-server-dom-turbopack/* by Turbopack's import map. Code says "webpack" everywhere, but Turbopack gets its own bindings at runtime. This affects debugging: stack traces and error messages will reference the turbopack variant.
$flags - flag wiring (config/schema/define-env/runtime env)$dce-edge - DCE-safe require patterns and edge constraints$runtime-debug - reproduction and verification workflowWeekly Installs
315
Repository
GitHub Stars
138.5K
First Seen
Feb 17, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli302
opencode301
codex301
github-copilot300
kimi-cli298
amp297
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,400 周安装