react/create-react-app

This system is a comprehensive tooling suite for building React applications, centered around the Create React App CLI and its associated packages. It provides a standardized development environment by bundling configuration for Babel, ESLint, Jest, and Webpack, while also offering a modular architecture for shared utilities, error overlays, and template management. The system supports modern JavaScript and TypeScript workflows, including type checking, asset handling, and end-to-end testing infrastructure.

21 changes.

This period focused on modernizing Create React App by extracting shared utilities and configurations into standalone packages like react-error-overlay and react-dev-utils. The work included refactoring the CLI scripts for better error handling, updating dependencies for React 17+ and Node 14+, and establishing comprehensive testing infrastructure for the new modular architecture.

32 changes.

This period focused on standardizing the default project templates by integrating React 18, TypeScript support, and performance metrics, while introducing new packages for browser polyfills and asset imports. Concurrently, the codebase expanded its test coverage significantly, adding comprehensive integration and unit tests for environment variables, modern JavaScript syntax, and webpack asset handling.

The Create React App template now includes a README.md and a .gitignore file. The README provides documentation on available scripts (start, test, build, eject) and links to further documentation, while the .gitignore file excludes common development artifacts like node\_modules, build directories, and environment files.

packages/cra-template/template · high confidence

Added configuration files to standardize code quality and documentation workflows. The repository now includes \.alexrc\ to configure the alex linter for inclusive language, \.eslintignore\ and \.eslintrc.json\ to define ESLint rules and exclusions, \.gitattributes\ and \.gitignore\ to manage line endings and ignored files, and \.prettierignore\ and \.prettierrc\ to enforce consistent code formatting. These changes ensure that all contributors follow the same standards for linting, formatting, and documentation.

(repo-wide) · high confidence

A new homepage (index.js and styles.module.css) has been added to the website's pages directory, featuring a hero banner, feature highlights, and a getting-started section for Create React App.

docusaurus/website/src/pages · high confidence

A new Babel plugin, babel-plugin-named-asset-import, is introduced to handle named imports and exports for asset files. The plugin transforms import and export statements for specific file extensions (like .svg) by mapping them to custom loaders (e.g., @svgr/webpack), allowing developers to import React components from SVG files or access asset URLs directly. The package includes the plugin implementation, a corresponding test suite, and an MIT license file.

packages/babel-plugin-named-asset-import · high confidence

The react-app-polyfill package is introduced, providing browser polyfills for Create React App projects. It includes specific entry points for Internet Explorer 9 and 11, as well as a 'stable' entry point for modern browsers. The package also adds a LICENSE file and a README with usage instructions.

packages/react-app-polyfill · high confidence

The react-error-overlay package now includes new effect modules to capture runtime errors and console output. Specifically, it adds handlers for unhandled errors and unhandled promise rejections, as well as a proxy for console methods to capture React component stack frames. These additions enable the overlay to intercept and display error information more effectively.

packages/react-error-overlay/src/effects · high confidence

Added a suite of template fixtures in the kitchensink test suite to verify that the build system correctly processes various asset types. This includes support for environment variables (\.env\), CSS (including modules and SCSS/Sass), JSON, images, SVGs, and files with unknown or no extensions. Each feature is paired with a corresponding test to ensure these assets render without crashing.

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack · high confidence

A new package named confusing-browser-globals has been introduced, providing a curated list of browser global variables that are commonly confused or misused. This package exports an array of global identifiers (such as 'event', 'status', 'name') that can be used with static analysis tools like ESLint to prevent accidental usage without explicit qualification. The package includes its own license, README documentation, and a basic test suite to verify the exported list.

packages/confusing-browser-globals · high confidence

The create-react-app template now includes a standard set of public assets and configuration files to support a complete web application out of the box. This includes an HTML template (index.html) that references the favicon, apple-touch-icon, and manifest using the %PUBLIC\_URL% placeholder for correct path resolution, a manifest.json file defining app metadata and icons for PWA support, and a robots.txt file that disallows all crawlers by default.

packages/cra-template/template/public · high confidence

The TypeScript template now includes default public assets, including an HTML entry point with proper meta tags and icon links, a web app manifest for PWA support, and a robots.txt file. These files provide the standard structure for a React application, ensuring that users have the necessary configuration for favicons, app metadata, and search engine indexing out of the box.

packages/cra-template-typescript/template/public · high confidence

The kitchensink template in the react-scripts fixtures now includes a comprehensive set of feature test components and utilities. This includes an App component that dynamically loads various syntax and webpack feature modules (such as array destructuring, async/await, CSS inclusion, and more) based on URL hashes, along with a BaseUrl feature component and its corresponding test. Additionally, supporting files like absoluteLoad.js, index.js, and subfolder/lol.js have been added to support these tests.

packages/react-scripts/fixtures/kitchensink/template/src · high confidence

The Docusaurus website now includes a CNAME file pointing to create-react-app.dev and a new SVG logo image (docusaurus.svg) in the static directory. These additions support the site's domain configuration and branding.

docusaurus/website/static · high confidence

Added a new set of template files in the webpack assets directory to support various asset types, including CSS modules, SCSS, SASS, and SVG images. These files serve as test fixtures to ensure that the build system correctly processes and includes these specific asset types, covering scenarios like CSS imports, module scoping, and SVG background images.

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets · high confidence

The Create React App TypeScript template now includes a README.md and a .gitignore file, providing users with essential documentation and default gitignore rules for dependencies, testing, and environment files.

packages/cra-template-typescript/template · high confidence

The React scripts now use a dedicated \createJestConfig.js\ utility to generate the Jest configuration. This centralizes the default settings (such as \testEnvironment: 'jsdom'\, \resetMocks: true\, and specific file extensions) and allows users to override a defined set of Jest options (like \testMatch\, \transform\, and \moduleNameMapper\) directly in \package.json\. The system also automatically detects TypeScript, generates a \tsconfig.json\ if missing, and provides clear error messages for unsupported Jest keys.

packages/react-scripts/scripts/utils · high confidence

The Babel configuration previously embedded within the project has been extracted into a new \babel-preset-react-app\ package. This package provides the \react-app\ preset, which configures Babel for development, production, and test environments, including support for Flow, TypeScript, decorators, and modern JavaScript features. The package includes entry points for different environments (dev, prod, test) and a \webpack-overrides.js\ file to handle caching for Babel macros.

packages/babel-preset-react-app · high confidence

The build and development utilities have been extracted into the new \react-dev-utils\ package. This includes webpack plugins for HTML interpolation and chunk inlining, a module scope plugin to restrict imports to the \src\ directory, a module not found plugin for prettier error messages, a file size reporter for build output, and various helper functions for console clearing, ESLint formatting, and browser detection. These utilities are now available for use in Create React App and can be used by ejected projects or external tools.

packages/react-dev-utils · high confidence

The Docusaurus website for Create React App has been initialized with a new configuration file (docusaurus.config.js) that sets up the site title, theme, and navigation. A sidebars.json file defines the documentation structure, organizing content into categories such as Getting Started, Development, and Testing. Additionally, a .gitignore file has been added to exclude build artifacts and environment variables, and a README.md provides basic instructions for local development and deployment.

docusaurus/website · high confidence

The react-error-overlay package has been added to the repository, introducing a new error overlay component for React. This change includes the full source code, build configuration (Webpack and Babel), and supporting files (LICENSE, README, etc.) required to compile and distribute the overlay.

packages/react-error-overlay · high confidence

The error overlay is now implemented as a React application running inside an isolated iframe, which prevents the overlay's styles and scripts from interfering with the user's application. This change introduces a new \iframeScript.js\ that renders the error UI, while \index.js\ manages the iframe lifecycle and state. The overlay now supports both light and dark themes, allowing the UI to adapt to the user's system preferences or configuration. Additionally, the module exports \reportRuntimeError\ and \dismissRuntimeErrors\ to allow external code to trigger and clear error states.

packages/react-error-overlay/src · high confidence

The \eslint-config-react-app\ package is now a standalone, shareable ESLint configuration. It provides a base configuration (\base.js\) for general JavaScript/TypeScript linting, a main configuration (\index.js\) that adds React, accessibility, and TypeScript-specific rules, and an optional Jest/testing-library configuration (\jest.js\) for test files. Users can extend this configuration in their own projects by adding \eslint-config-react-app\ to their \.eslintrc.json\ file, enabling consistent linting rules across React applications.

packages/eslint-config-react-app · high confidence

The \react-scripts\ package now includes dedicated configuration modules for environment variables (\env.js\), HTTPS setup (\getHttpsConfig.js\), and module resolution (\modules.js\), alongside updated \paths.js\ and \webpack.config.js\ files. These changes introduce support for loading \.env\ files with environment-specific variants, enable custom SSL certificates for the development server, and allow configuring TypeScript/JavaScript base URLs for module resolution and aliases.

packages/react-scripts/config · high confidence

The repository now includes a comprehensive suite of end-to-end (E2E) tests to validate the Create React App workflow. This includes scripts for simple app creation, full 'kitchensink' feature testing, and specific checks for TypeScript, Yarn, and distribution tags. The test suite is orchestrated by a new \tasks/local-test.sh\ runner and relies on a local NPM registry (Verdaccio) to simulate publishing and installing packages in an isolated environment. Additionally, a new \tasks/cra.js\ script facilitates local development by temporarily linking all monorepo packages, and a \tasks/screencast.js\ utility is added to generate animated SVGs of the CLI for documentation.

tasks · high confidence

The \react-app.d.ts\ file was added to provide TypeScript type definitions for common static asset imports (bmp, gif, jpg, jpeg, png, webp, avif) and CSS/Sass/Scss modules. Users importing these assets will now receive proper type checking and autocompletion. Additionally, CSS module classes are now typed as readonly, and the \title\ prop is explicitly included in the SVG component type definition.

packages/react-scripts/lib · high confidence

A new 'kitchensink' template has been added to the react-scripts fixtures, providing a comprehensive test suite for Create React App's end-to-end testing. This includes environment variable configuration files (.env, .env.development, .env.local, .env.production) to test variable expansion and override behavior, along with Jest configuration files (jest.integration.config.js, jest.transform.js) and supporting files (README.md, gitignore, jsconfig.json, public/index.html) to facilitate running integration and unit tests for environment variables, syntax, and webpack features.

packages/react-scripts/fixtures/kitchensink/template · medium confidence

The React Error Overlay package now includes Flow type declarations for several external dependencies (anser, @babel/code-frame, html-entities, settle-promise, and source-map). This change improves type safety and developer experience by providing explicit type information for these modules, ensuring that the error overlay's internal code can interact with these libraries without Flow errors.

packages/react-error-overlay/flow · high confidence

The create-react-app CLI now requires Node 14 or higher, exiting with an error on older versions. Additionally, running the CLI triggers a deprecation warning directing users to react.dev for modern React frameworks, signaling that the global CLI is no longer the recommended workflow.

packages/create-react-app · high confidence

A new custom CSS file (custom.css) is introduced to define the site's primary color palette via CSS variables, adjust the base font size for mobile and desktop breakpoints, and apply specific styling to the announcement bar (including font size, padding, and link colors).

docusaurus/website/src/css · high confidence

The error overlay interface has been refactored from a non-React implementation to a React-based one. This introduces new React components for the overlay structure, including a close button, code block display, collapsible stack frames, header, footer, and navigation bar. The UI now supports dynamic theming via a ThemeContext, allowing for dark mode and other visual customizations.

packages/react-error-overlay/src/components · high confidence

The react-scripts CLI now terminates the Node.js process with a non-zero exit code when encountering unhandled promise rejections, ensuring that build, start, and test scripts fail visibly rather than silently succeeding. Additionally, the script now correctly handles process signals (SIGKILL, SIGTERM) to provide specific error messages about early process termination, and ensures the correct exit code is propagated from spawned child processes.

packages/react-scripts/bin · high confidence

The Jest configuration in react-scripts has been refactored to use separate, dedicated transform modules for Babel, CSS, and static files. Babel transforms now dynamically detect and use the React 17+ automatic JSX runtime when available. CSS imports are transformed into empty modules, and static file imports (including SVGs) are converted to their filenames or React components, improving modularity and test isolation.

packages/react-scripts/config/jest · high confidence

The development error overlay has been refactored into new React components (CompileErrorContainer, RuntimeError, RuntimeErrorContainer, StackTrace, and StackFrame) to improve the user experience. Users can now click on file paths in the stack trace to open them in their editor, and internal/webpack-internal frames are automatically collapsed to reduce noise. The overlay also features a navigation bar for multiple errors, a footer with helpful context about development-only visibility, and improved styling for error messages and code blocks.

packages/react-error-overlay/src/containers · medium confidence

The \react-scripts\ CLI commands (build, eject, init, start, test) have been refactored from a single monolithic script into separate, modular entry points (\build.js\, \eject.js\, \init.js\, \start.js\, \test.js\). This change improves maintainability and allows each command to be executed independently. Additionally, the scripts now crash on unhandled promise rejections to prevent silent failures, and the \init\ script now automatically initializes a Git repository and commits the initial project state.

packages/react-scripts/scripts · high confidence

The error overlay's internal logic has been restructured into distinct, reusable utility modules. This includes a new \StackFrame\ class to represent error frames, separate parsers for stack traces and compile errors, and dedicated modules for source map resolution (\getSourceMap\), code mapping (\mapper\), and un-mapping (\unmapper\). Additional utilities handle line context (\getLinesAround\), URL formatting (\getPrettyURL\), and warning massage (\warnings\). This modularization supports the broader migration of the error overlay to React and improves maintainability.

packages/react-error-overlay/src/utils · high confidence

The default TypeScript template now uses the React 18 \createRoot\ API instead of the legacy \ReactDOM.render\. Additionally, the template now includes \@testing-library/react\ and \@testing-library/jest-dom\ for testing, and wraps the root component with \React.StrictMode\.

packages/cra-template-typescript/template/src · high confidence

The default template now uses React 18's \createRoot\ API and wraps the app in \React.StrictMode\. It also includes a new \reportWebVitals.js\ file that measures performance metrics (CLS, FID, FCP, LCP, TTFB) using the \web-vitals\ library, and integrates \@testing-library\ with \jest-dom\ for testing. The \App\ component and its CSS have been updated to respect the \prefers-reduced-motion\ user preference, and a basic test for the 'Learn React' link has been added.

packages/cra-template/template/src · high confidence

Add syntax feature tests for modern JavaScript; Added React error overlay fixtures for testing; Added TypeScript fixture tests for decorators and baseUrl resolution; Added advanced TypeScript test fixture; Added behavior tests for Bootstrap SASS, multiple runtime builds, and Flow class properties; Added integration tests for create-react-app; Added integration tests for environment variables, language syntax, and webpack asset handling; Added test coverage for TypeScript detection logic; Added test coverage for react-dev-utils; Added tests for TypeScript type-checking error reporting; Added tests for jsconfig fixture; Added tests for mjs library support; Added tests for relative path handling in production builds; Added tests for template package name resolution; Added tests for the react-error-overlay package; Added tests for webpack error message formatting.

The Docusaurus-based documentation site (docusaurus/website) has been updated to use Docusaurus 2.0.0-alpha.64, along with React 16.12.0 and React DOM 16.12.0. The root package.json and package-lock.json have been updated to include the docusaurus/website workspace and its dependencies, ensuring the documentation site can be built and run within the monorepo.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 49 → 50 (+1.3)

• Code Health 53 → 53 (+0.7)
• Architecture 83 → 83 (+0.0)
• Maturity 53 → 53 (+0.0)
• Readiness 36 → 38 (+2.5)
• Security 74 → 74 (+0.0)
• Domain Modelling 100 → 100 (+0.0)
• Accessibility 73 → 73 (+0.0)

• Critical CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High vulnerability: [GHSA redacted] (package-lock.json)
• High vulnerability: [GHSA redacted] (package-lock.json)

• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

react/create-react-app was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.