From e916a5d28c1fdc8e06432f9ee7551d56bf797b57 Mon Sep 17 00:00:00 2001 From: Simon Ward Date: Tue, 17 Feb 2026 11:15:58 +0000 Subject: [PATCH] Upgrade to React 19.2 with React 18 backward compatibility - Upgrade react/react-dom devDependencies to ^19.2.4 - Set minimum peer dependency to React >= 18 - Default babel JSX runtime to 'automatic' (from 'classic') - Migrate all ReactDOM.render/unmountComponentAtNode calls to createRoot API - Upgrade @testing-library/react to v16, @testing-library/user-event to v14 - Upgrade eslint-plugin-react-hooks to v5 - Upgrade TypeScript template types to @types/react@^19, typescript@^5 - Remove react-app-polyfill/ie9 from react-error-overlay - Updated CLAUDE.md with new concerns --- CLAUDE.md | 173 + package-lock.json | 45578 ++++++++-------- package.json | 6 +- packages/babel-preset-react-app/create.js | 4 +- .../cra-template-typescript/template.json | 10 +- packages/cra-template/template.json | 4 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-error-overlay/package.json | 4 +- .../react-error-overlay/src/iframeScript.js | 17 +- .../src/features/config/BaseUrl.test.js | 4 +- .../features/env/ExpandEnvVariables.test.js | 4 +- .../src/features/env/FileEnvVariables.test.js | 4 +- .../src/features/env/PublicUrl.test.js | 4 +- .../features/env/ShellEnvVariables.test.js | 4 +- .../syntax/ArrayDestructuring.test.js | 4 +- .../src/features/syntax/ArraySpread.test.js | 4 +- .../src/features/syntax/AsyncAwait.test.js | 4 +- .../features/syntax/ClassProperties.test.js | 4 +- .../syntax/ComputedProperties.test.js | 4 +- .../syntax/CustomInterpolation.test.js | 4 +- .../features/syntax/DefaultParameters.test.js | 4 +- .../syntax/DestructuringAndAwait.test.js | 4 +- .../src/features/syntax/Generators.test.js | 4 +- .../features/syntax/NullishCoalescing.test.js | 4 +- .../syntax/ObjectDestructuring.test.js | 4 +- .../src/features/syntax/ObjectSpread.test.js | 4 +- .../features/syntax/OptionalChaining.test.js | 4 +- .../src/features/syntax/Promises.test.js | 4 +- .../features/syntax/RestAndDefault.test.js | 4 +- .../features/syntax/RestParameters.test.js | 4 +- .../syntax/TemplateInterpolation.test.js | 4 +- .../src/features/webpack/CssInclusion.test.js | 4 +- .../webpack/CssModulesInclusion.test.js | 4 +- .../features/webpack/DynamicImport.test.js | 4 +- .../features/webpack/ImageInclusion.test.js | 4 +- .../features/webpack/JsonInclusion.test.js | 4 +- .../features/webpack/LinkedModules.test.js | 4 +- .../features/webpack/NoExtInclusion.test.js | 4 +- .../features/webpack/SassInclusion.test.js | 4 +- .../webpack/SassModulesInclusion.test.js | 4 +- .../features/webpack/ScssInclusion.test.js | 4 +- .../webpack/ScssModulesInclusion.test.js | 4 +- .../src/features/webpack/SvgComponent.test.js | 6 +- .../src/features/webpack/SvgInCss.test.js | 4 +- .../src/features/webpack/SvgInclusion.test.js | 4 +- .../webpack/UnknownExtInclusion.test.js | 4 +- .../kitchensink/template/src/index.js | 5 +- packages/react-scripts/package.json | 6 +- test/fixtures/boostrap-sass/src/index.js | 5 +- .../global-scss-asset-resolution/src/index.js | 5 +- test/fixtures/jsconfig/src/App.test.js | 4 +- test/fixtures/jsconfig/src/index.js | 5 +- test/fixtures/mjs-support/src/index.js | 5 +- .../typescript-advanced/src/index.tsx | 5 +- .../typescript-typecheck/src/index.tsx | 5 +- .../webpack-message-formatting/src/index.js | 5 +- 56 files changed, 22126 insertions(+), 23872 deletions(-) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000000..f37313e1c77 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,173 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is **backpack-react-scripts**, a Skyscanner fork of Facebook's Create React App (specifically the `react-scripts` package). It provides a customized build toolchain for React applications that use Skyscanner's Backpack design system. The fork is based on Create React App v5+ and adds Skyscanner-specific configuration and build features. + +## Monorepo Structure + +This is a Lerna monorepo with workspaces defined in the root `package.json`. Key packages: + +- **`packages/react-scripts/`**: The main package containing webpack configs, build scripts, and the Backpack addons +- **`packages/create-react-app/`**: Global CLI for bootstrapping new apps +- **`packages/babel-preset-react-app/`**: Babel preset configuration +- **`packages/eslint-config-react-app/`**: ESLint configuration +- **`packages/react-dev-utils/`**: Shared utilities for development tooling +- **`packages/react-error-overlay/`**: Development error overlay UI +- **Other packages**: Templates, polyfills, and supporting packages + +## Build Commands + +### Root Level Commands + +```bash +# Install dependencies (runs postinstall to build react-error-overlay) +npm install + +# Run development server (uses template in packages/cra-template/template) +npm start + +# Build production bundle +npm run build + +# Run tests +npm test + +# Run integration tests +npm run test:integration + +# Run tests for backpack-addons specifically +npm run test:addons + +# End-to-end tests (requires setup) +npm run e2e + +# End-to-end tests in Docker +npm run e2e:docker + +# Lint entire codebase +npm run eslint + +# Format code with Prettier +npm run format + +# Create a new app using local version +npm run create-react-app +``` + +### Testing End-to-End + +To test locally without full e2e setup: + +```bash +npx jest test/ --watchAll +``` + +To filter tests (e.g., webpack messages only): + +- Press `p` +- Type pattern like `webpack-message` +- Press enter + +## Architecture: Backpack Addons System + +The key architectural feature is the **backpack-addons** system located in `packages/react-scripts/backpack-addons/`. This provides customization points for webpack configuration without ejecting. + +### Adding New Backpack Addons + +1. Create the feature module in `packages/react-scripts/backpack-addons/` +2. In webpack config files that use the addon (e.g., `webpack.config.js`, `webpack.config.ssr.js`): + - Add `// #backpack-addon {{featureName}}` comment on every modified line + - Require the addon module rather than writing inline code +3. Document the addon in `packages/react-scripts/backpack-addons/README.md` + +### Available Backpack Addons + +Configuration is read from `"backpack-react-scripts"` field in consuming app's `package.json`: + +- **`babelIncludePrefixes`**: Module name prefixes to opt into Babel compilation (default: `["@skyscanner/bpk-", "bpk-"]`) +- **`sriEnabled`**: Enable Subresource Integrity for security (default: `false`) +- **`crossOriginLoading`**: Configure cross-origin loading for chunks (default: `false`) +- **`ignoreCssWarnings`**: Suppress CSS ordering warnings (default: `false`) +- **`cssModules`**: Enable CSS modules (default: `true`) +- **`amdExcludes`**: Modules to exclude from AMD parsing (default: `["lodash"]`) +- **`externals`**: Webpack externals configuration (default: `{}`) +- **`ssrExternals`**: Externals for SSR bundle only (default: `{}`) +- **`enableAutomaticChunking`**: Enable vendor/common chunk splitting (default: `false`) +- **`vendorsChunkRegex`**: Regex for vendor chunk content (requires `enableAutomaticChunking`) +- **`splitChunksConfig`**: Direct webpack splitChunks config (ignored if `enableAutomaticChunking` is true) +- **`enableBpkStylesChunk`**: Create single chunk for all Backpack CSS (default: `false`) + +### Server-Side Rendering (SSR) + +The fork includes SSR support with a separate webpack config: + +- **`config/webpack.config.ssr.js`**: SSR-specific webpack configuration +- **`scripts/start-ssr.js`**: Development script that runs both client and SSR builds +- **`backpack-addons/ssr/`**: SSR-specific utilities including: + - `forkSsr.js`: Forking logic for parallel client/SSR builds + - `isSsr.js`: Detection of SSR environment + - `customWebpackUtils.js`: SSR webpack customization utilities + - `MultiCompilerUi.js`: UI for displaying parallel build status + - `statusFile.js`: Status reporting for multi-compiler setup + +## Key Webpack Configuration Files + +- **`config/webpack.config.js`**: Main client-side webpack config +- **`config/webpack.config.ssr.js`**: Server-side rendering webpack config +- **`config/webpackDevServer.config.js`**: Dev server configuration +- **`config/paths.js`**: Path resolution and structure +- **`config/env.js`**: Environment variable handling + +## Build Output Differences + +Beyond standard CRA output, this fork generates: + +- **`build/css.html`**: HTML partial with `` tags for all CSS files +- **`build/js.html`**: HTML partial with `