Advanced Topics

This section covers more advanced configuration options and common issues.

Using a Custom react-scripts Version

It is possible to use a custom or forked version of the react-scripts package with react-app-rewired. You can specify the package name using the --scripts-version command-line option or by setting the REACT_SCRIPTS_VERSION environment variable.

Here is an example using react-scripts-ts in package.json:

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

A custom react-scripts package must provide a specific set of files for react-app-rewired to function correctly. The required files differ between major versions of react-app-rewired.

react-app-rewired 2.x Requirements:

• config/env.js
• config/webpack.config.js
• config/webpackDevServer.config.js
• scripts/build.js
• scripts/start.js
• scripts/test.js
• scripts/utils/createJestConfig.js

react-app-rewired 1.x Requirements:

• config/env.js
• config/webpack.config.dev.js
• config/webpack.config.prod.js
• config/webpackDevServer.config.js
• scripts/build.js
• scripts/start.js
• scripts/test.js
• scripts/utils/createJestConfig.js

Specifying config-overrides Location

You can specify a custom path for your configuration file if you don't want to use config-overrides.js in the project root.

Via package.json

Add a config-overrides-path key to your package.json. This is useful for using a third-party or shared configuration package.

"config-overrides-path": "node_modules/some-preconfigured-rewire"

Via Command Line

Pass the --config-overrides option to the react-app-rewired script.

react-app-rewired start --config-overrides src/my-overrides.js

Using config-overrides as a Directory

For complex configurations, you can organize your overrides into a directory. If you create a directory named config-overrides at the project root, react-app-rewired will automatically import the index.js file from within that directory. This allows you to split each override into a separate file.

An example structure:

+-- your-project
|   +-- config-overrides/
|   |   +-- index.js         (exports the final config object)
|   |   +-- webpack.js       (exports the webpack override function)
|   |   +-- jest.js          (exports the jest override function)
|   |   +-- devServer.js     (exports the devServer override function)

Providing Config to 3rd Party Tools

Some third-party tools, like react-cosmos, require access to your webpack configuration. You can create a webpack.config.js file at your project root and export the rewired configuration using the following snippet:

// webpack.config.js
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);

You can then point your third-party tool to this file.

Changing the Entry Point

Changing the entry point from the default src/index.js can be difficult due to how create-react-app is structured. Here are two common workarounds:

1. Import from src/index.js: The simplest solution is to keep src/index.js and use it to import your desired entry file.

   // src/index.js
   require('./index.tsx');

2. Override checkRequiredFiles: A more advanced technique involves overriding a utility function that create-react-app uses to check for the existence of src/index.js. This is not officially supported and can be brittle.