CtrlK
BlogDocsLog inGet started
Tessl Logo

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

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;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-app-rewired
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-app-rewired@2.2.x
Publish Source
CLI
Badge
tessl/npm-react-app-rewired badge