react-app-rewired

react-app-rewired is a developer tool that allows you to override and customize the webpack configuration of Create React App (CRA) projects without using the 'eject' command. It preserves the benefits of CRA's zero-config setup while giving developers the flexibility to add plugins, loaders, and other customizations they need. The tool works by intercepting the standard react-scripts commands (start, build, test) and applying user-defined overrides from a config-overrides.js file. This file can export either a single function for webpack customization or an object with separate functions for webpack, Jest, devServer, and paths configurations. Key capabilities include: customizing webpack rules and plugins for development and production builds; modifying Jest test configuration including test path patterns and Babel presets; overriding the Webpack Dev Server configuration for HTTPS certificates and proxy settings; and adjusting project paths passed to webpack and Jest. The project supports both CRA 1.x (Webpack 3) and CRA 2.x (Webpack 4) versions, with version 2.0 removing the rewire helper functions in favor of direct configuration. It also supports custom react-scripts packages via the --scripts-version flag, enabling use with TypeScript variants like react-scripts-ts. A large community ecosystem of rewire plugins exists for common use cases including Babel plugins (emotion, lodash, styled-components), webpack plugins (favicons, imagemin, bundle analyzer), and loaders (TypeScript, SCSS, SVG, YAML). The config-overrides file can also be specified as a directory for modular organization or passed via command line for flexibility. Important caveats: using react-app-rewired breaks CRA's official guarantees, meaning you own the configuration and receive no official support. The author recommends Next.js or Razzle for projects needing extensive custom webpack configuration out of the box. Alternatives like customize-cra, Rescripts, and craco are also available for CRA 2.0+ compatibility.