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

utilities-helpers.mddocs/

Utilities and Helpers

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

Capabilities

Main Exports (Deprecated)

Legacy helper functions from the main entry point, deprecated as of v2.0.

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');

Usage Example:

const { paths } = require('react-app-rewired');

// Access paths for third-party integration
console.log(paths.appSrc);        // Source directory path
console.log(paths.appBuild);      // Build directory path
console.log(paths.scriptVersion); // react-scripts module path

Deprecation Note: All helper functions except paths are deprecated and will throw errors directing users to customize-cra.

Paths Utilities

Path resolution and configuration utilities from the paths module.

/**
 * Extended paths object with react-app-rewired specific properties
 */
const paths = require('react-app-rewired/scripts/utils/paths');

interface PathsObject {
  // react-scripts paths (inherited via Object.assign)
  appPath: string;              // Project root directory
  appSrc: string;               // Source directory  
  appBuild: string;             // Build output directory
  appPublic: string;            // Public assets directory
  appPackageJson: string;       // package.json file path
  appIndexJs: string;           // Main index.js file
  appHtml: string;              // HTML template file
  
  // react-app-rewired specific paths (from paths.js)
  scriptVersion: string;        // Path to react-scripts module directory
  configOverrides: string;      // Path to config-overrides file/directory
  customScriptsIndex: number;   // Index of --scripts-version arg (-1 if not present)
  configOverridesIndex: number; // Index of --config-overrides arg (-1 if not present)
  
  // All other paths from react-scripts/config/paths are also available
  // via Object.assign({}, paths, overrides.paths(pathsConfig, process.env.NODE_ENV))
}

Usage Examples:

const paths = require('react-app-rewired/scripts/utils/paths');

// Access react-scripts module directory
const webpackConfig = require(`${paths.scriptVersion}/config/webpack.config`);

// Check if custom scripts version was specified
if (paths.customScriptsIndex > -1) {
  console.log('Using custom react-scripts version');
}

// Access config overrides path
const overrides = require(paths.configOverrides);

Dependency Resolution Utilities

Utilities for requiring modules relative to the react-scripts installation.

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

/**
 * Resolve module path relative to react-scripts
 * @param id - Module identifier to resolve
 * @returns Resolved module path
 */
function dependRequireResolve(id: string): string;

/**
 * Require module relative to react-scripts  
 * @param id - Module identifier to require
 * @returns Required module
 */
function dependRequire(id: string): any;

Usage Examples:

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

// Require babel-jest from react-scripts context
const babelJest = dependRequire('babel-jest');

// Resolve path to babel preset
const presetPath = dependRequireResolve('babel-preset-react-app');

// Use in webpack config
config.module.rules.push({
  test: /\.js$/,
  use: {
    loader: dependRequireResolve('babel-loader'),
    options: {
      presets: [dependRequireResolve('babel-preset-react-app')]
    }
  }
});

Jest Configuration Utilities

Utilities for customizing Jest configuration with package.json overrides.

/**
 * Jest configuration merge utility
 * @param config - Base Jest configuration from react-scripts
 * @returns Merged Jest configuration with package.json overrides
 */
const rewireJestConfig = require('react-app-rewired/scripts/utils/rewireJestConfig');

function rewireJestConfig(config: any): any;

Usage Examples:

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

// In jest override function
jest: function(config) {
  // Apply package.json jest overrides first
  config = rewireJestConfig(config);
  
  // Then apply additional customizations
  config.testTimeout = 10000;
  
  return config;
}

Merge Behavior:

  • String, number, boolean values: Overwrite completely
  • Arrays: Concatenate package.json values with default values
  • Objects: Merge properties, with package.json taking precedence

Babel Transform Utilities

Custom Babel transformer module for Jest with JSX runtime detection.

/**
 * Custom babel-jest transformer module with react-app preset
 * This is a pre-configured transformer, not a function
 */
const babelTransform = require('react-app-rewired/scripts/utils/babelTransform');

// The module exports a babel-jest transformer with this configuration:
interface BabelTransformerConfig {
  presets: [
    [string, { runtime: 'automatic' | 'classic' }]
  ];
  plugins: any[];
  babelrc: true;  // Allows .babelrc files to be respected
}

Implementation Details from babelTransform.js:

// JSX runtime detection logic
const hasJsxRuntime = (() => {
  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
    return false;
  }
  try {
    require.resolve('react/jsx-runtime');
    return true;
  } catch (e) {
    return false;
  }
})();

// Creates transformer with:
// runtime: hasJsxRuntime ? 'automatic' : 'classic'
// babelrc: true

Features:

  • Automatic JSX runtime detection (React 17+)
  • Falls back to classic JSX transform if react/jsx-runtime not available
  • Respects DISABLE_NEW_JSX_TRANSFORM=true environment variable
  • Uses babel-preset-react-app with appropriate runtime configuration
  • Honors .babelrc files in the project

Third-Party Integration

Utilities for integrating react-app-rewired with external tools.

/**
 * Export rewired webpack config for third-party tools
 * Create webpack.config.js in project root:
 */
const { paths } = require('react-app-rewired');
const overrides = require('react-app-rewired/config-overrides');
const config = require(paths.scriptVersion + '/config/webpack.config.dev');

module.exports = overrides.webpack(config, process.env.NODE_ENV);

Supported Tools:

  • react-cosmos
  • webpack-bundle-analyzer
  • Storybook
  • Any tool that accepts a webpack configuration file

Environment Detection

// Environment variables used by utilities
process.env.NODE_ENV                    // 'development', 'production', 'test'
process.env.REACT_SCRIPTS_VERSION      // Custom react-scripts package name
process.env.DISABLE_NEW_JSX_TRANSFORM  // 'true' to disable automatic JSX runtime

File System Utilities

// Custom config-overrides path detection
const projectDir = require('fs').realpathSync(process.cwd());
const packageJson = require(path.resolve(projectDir, 'package.json'));
const customPath = packageJson['config-overrides-path'];

// Resolves to:
// 1. Custom path from package.json 'config-overrides-path'
// 2. Command line --config-overrides argument  
// 3. Default: ./config-overrides (file or directory)

Install with Tessl CLI

npx tessl i tessl/npm-react-app-rewired

docs

cli-commands.md

configuration-overrides.md

index.md

utilities-helpers.md

tile.json