or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-commands.mdconfiguration-overrides.mdindex.mdutilities-helpers.md
tile.json

tessl/npm-react-app-rewired

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-app-rewired@2.2.x

To install, run

npx @tessl/cli install tessl/npm-react-app-rewired@2.2.0

index.mddocs/

React App Rewired

React App Rewired allows you to tweak the create-react-app webpack configuration without ejecting and without creating a fork of react-scripts. It provides a way to customize webpack, Jest, dev server, and paths configurations through a simple override system.

Package Information

  • Package Name: react-app-rewired
  • Package Type: npm
  • Language: JavaScript/Node.js
  • Installation: npm install react-app-rewired --save-dev

Core Imports

// Main module exports (most helpers deprecated as of v2.0)
const reactAppRewired = require('react-app-rewired');
const { paths } = require('react-app-rewired');

// For third-party webpack config integration
const overrides = require('react-app-rewired/config-overrides');

Basic Usage

1. Install and Configure

npm install react-app-rewired --save-dev

2. Create Configuration File

Create config-overrides.js in your project root:

module.exports = function override(config, env) {
  // Modify the webpack config
  return config;
};

3. Update Package Scripts

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build", 
    "test": "react-app-rewired test"
  }
}

Architecture

React App Rewired is built around several key components:

  • CLI Interface: Command-line tool that intercepts react-scripts commands
  • Override System: Configuration files that modify webpack, Jest, and dev server settings
  • Script Wrappers: Modified versions of react-scripts that apply overrides before execution
  • Path Resolution: Custom path handling for different react-scripts versions
  • Memory Patching: Runtime modification of require cache to apply overrides

Capabilities

CLI Commands

Command-line interface for running customized create-react-app scripts with webpack and configuration overrides.

// Available commands
"react-app-rewired start"   // Development server with overrides
"react-app-rewired build"   // Production build with overrides  
"react-app-rewired test"    // Test runner with Jest overrides

CLI Commands

Configuration Override System

Core system for customizing webpack, Jest, dev server, and paths configurations through override functions.

// Single function export
module.exports = function override(config, env) {
  return config;
};

// Object export with multiple override functions
module.exports = {
  webpack: function(config, env) { return config; },
  jest: function(config) { return config; },
  devServer: function(configFunction) { return configFunction; },
  paths: function(paths, env) { return paths; }
};

Configuration Overrides

Utilities and Helpers

Utility functions and path resolution helpers for accessing react-scripts internals and integrating with third-party tools.

// Main module exports
const {
  getLoader,           // function - deprecated, throws error
  loaderNameMatches,   // function - deprecated, throws error
  getBabelLoader,      // function - deprecated, throws error
  injectBabelPlugin,   // function - deprecated, throws error
  compose,             // function - deprecated, throws error
  paths                // object - current paths configuration
} = require('react-app-rewired');

// Dependency resolution utilities
const { dependRequire, dependRequireResolve } = require('react-app-rewired/scripts/utils/dependRequire');

// Jest configuration utilities  
const rewireJestConfig = require('react-app-rewired/scripts/utils/rewireJestConfig');

Utilities and Helpers

Types

interface OverrideFunction {
  (config: any, env: string): any;
}

interface DevServerOverrideFunction {
  (configFunction: Function, env: string): Function;
}

interface JestOverrideFunction {
  (config: any): any;
}

interface PathsOverrideFunction {
  (paths: any, env: string): any;
}

interface ConfigOverrides {
  webpack?: OverrideFunction;
  jest?: JestOverrideFunction;
  devServer?: DevServerOverrideFunction;
  paths?: PathsOverrideFunction;
}