React Vendoring

What it does

This skill, react-vendoring, facilitates changes related to vendored React code within Next.js applications. Specifically, it addresses how React is handled in the App Router (where it's not resolved from node_modules but is instead vendored) and provides guidance on working with server components and APIs from react-server-dom-webpack/*. It ensures proper integration of these components while avoiding runtime errors related to incorrect import paths or missing type declarations.

When to use it

• When modifying React code that's been vendored as part of a Next.js project (particularly with the App Router).
• When integrating new APIs from react-server-dom-webpack/* into your application’s server components.
• If you encounter runtime errors indicating "The react-server condition must be enabled" when working with React server features.
• When adding Node.js-only React APIs to your Next.js project.

Key capabilities

• Provides guidance on managing React versions in the App Router versus the Pages Router.
• Details how to handle stable and experimental React channels (compiled/react/ and compiled/react-experimental/).
• Explains the importance of importing Flight server APIs through entry-base.ts.
• Outlines the process for adding type declarations for new React APIs in $$compiled.internal.d.ts.
• Describes how to safely expose Node.js-only React APIs using environment variables and the ComponentMod parameter.

Example prompts

• "How do I add a new API from react-server-dom-webpack/*?"
• "Why am I getting an error saying 'The react-server condition must be enabled'?"
• "Where should I put type declarations for vendored React packages?"

Tips & gotchas

• App Router Specific: The skill is most relevant when working with the Next.js App Router, as React handling differs significantly from the Pages Router.
• entry-base.ts is Key: All imports from react-server-dom-webpack/* must go through entry-base.ts in the (react-server) layer to avoid runtime errors.
• Type Declarations are Required: Always add type declarations for new React APIs to packages/next/types/$$compiled.internal.d.ts.