react-sync

Build React bundles and synchronize them into a local Next.js checkout.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, corepack, and includes scripts (resource) components.

What problem does it solve?

Validating React changes against Next.js requires building React's bundle variants and syncing them into the Next.js repository, a multi-step process that is easy to get wrong due to PATH resolution and Corepack quirks.

Core Features & Use Cases

  • Automated React Build: Runs the React rollup build script to produce stable and experimental bundle variants consumed by Next.js.
  • Repository Sync: Copies the built React artifacts into the Next.js checkout using the pnpm sync-react command.
  • PATH Workaround: Handles a Codex Corepack PATH-precedence bug so the repository-pinned pnpm version is used for both the outer and nested install commands.
  • Use Case: When you modify React internals and need to verify the changes integrate correctly with Next.js, run this skill to build React, sync it into Next.js, and execute the focused tests.

Quick Start

Use the react-sync skill to build my local React checkout and sync the bundles into the Next.js repository for integration testing.

Frequently Asked Questions about react-sync

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

FAQPage Schema
How do I sync a local React checkout into Next.js for testing?

Run the build-for-next.sh script from the React repository to produce oss-stable and oss-experimental bundles, then execute `pnpm sync-react --version <react-repo>` from the Next.js checkout to copy the artifacts in.

What does the build-for-next.sh script produce?

It runs the React rollup build for stable and experimental release channels across multiple bundle targets including react, react-dom, react-dom-server, scheduler, and react-server-dom-webpack, outputting them to build/oss-stable and build/oss-experimental.

Why does pnpm sync-react fail with the wrong pnpm version?

Codex injects a bundled pnpm ahead of the Corepack shim on PATH, so command lookup bypasses the repository's packageManager field. Prepending the Corepack directory to PATH forces both the outer and nested pnpm invocations to resolve through Corepack.

Can I use corepack pnpm instead of modifying PATH?

No. Invoking only the outer command with `corepack pnpm` is insufficient because the nested `pnpm install` inside sync-react still resolves pnpm from PATH, so the Corepack shim must be first on PATH for both calls.

When should I rebuild Next.js after syncing React?

Rebuild Next.js when the synced React changes affect compiled output or runtime behavior, then run the focused test command matching the changed area before committing.