API Reference & Migration Guide (v1 to v2)

Version 2.0 of react-app-rewired introduced a significant change by removing the built-in rewire helper functions. This was done to simplify the project's maintenance and encourage the use of more comprehensive, community-supported tools for webpack configuration.

Deprecated Helper Functions

The following helper functions, which were available in react-app-rewired v1.x, have been removed and will throw an error if used in v2.0+.

  • getLoader
  • loaderNameMatches
  • getBabelLoader
  • injectBabelPlugin
  • compose

If you attempt to use any of these functions, you will receive the following error:

Error: The "<functionName>" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins

Migration Path: Using customize-cra

The recommended replacement for these helper functions is the customize-cra library. It provides a rich set of utility functions to compose webpack overrides in a clean and declarative way.

Installation

First, add customize-cra to your project:

npm install customize-cra --save-dev
# or
yarn add customize-cra --dev

Example Migration

Here is an example of how you might migrate a config-overrides.js file from v1 to v2.

v1 config-overrides.js (Old Way)

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

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
  return config;
};

v2 config-overrides.js (New Way with customize-cra)

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin(['import', { libraryName: 'antd', style: 'css' }])
);

By adopting customize-cra, you gain access to a well-maintained and extensive set of helpers specifically designed for customizing Create React App projects, making your config-overrides.js file more readable and robust.