Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Utility functions and path resolution helpers for accessing react-scripts internals and integrating with third-party tools.
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 pathDeprecation Note: All helper functions except paths are deprecated and will throw errors directing users to customize-cra.
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);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')]
}
}
});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:
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: trueFeatures:
react/jsx-runtime not availableDISABLE_NEW_JSX_TRANSFORM=true environment variablebabel-preset-react-app with appropriate runtime configuration.babelrc files in the projectUtilities 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:
// 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// 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