Can I override "config-overrides.js"? about react-app-rewired

[dawnmist]

Which framework are you using?

If it depends on react-app-rewired, it's quite likely that the config-overrides.js file it uses is the same one that react-app-rewired uses - i.e. the framework is likely to be passing the config-overrides.js file to react-app-rewired.

[wonsuc]

The framework we use is private sdk which is not public open source codes. It's very modified file from original config-overrides.js file.

[NathMorris]

Yes, you can create your own config-overrides.js in the root of your project and use it to extend or override the existing config-overrides.js provided by the framework SDK. However, you will need to ensure that your custom configuration properly integrates or merges with the existing one to avoid any conflicts or issues.

Here's how you can achieve this:

Install Necessary Packages: Ensure you have react-app-rewired installed. You can install it using npm or yarn if it's not already installed:

bash

npm install react-app-rewired --save-dev

or

bash

yarn add react-app-rewired --dev

Create Your Custom config-overrides.js: In the root directory of your project, create a new config-overrides.js file.

Merge or Extend the Existing Configuration: Inside your config-overrides.js, you will import the existing configuration from the framework SDK and then extend or modify it as needed.

Here is an example of how you can do this:

javascript

// config-overrides.js in the root of your project

const { override, addBabelPlugins, addWebpackAlias } = require('customize-cra');
const path = require('path');

// Import the existing config-overrides.js from the framework SDK
const frameworkOverrides = require('framework-sdk/path/to/config-overrides.js'); // Adjust the path accordingly

// Function to merge/override configurations
const myOverrides = (config, env) => {
  // Apply the framework's overrides first
  config = frameworkOverrides(config, env);

  // Now apply your custom overrides
  return override(
    // Example: Add Babel plugins
    ...addBabelPlugins(
      'babel-plugin-styled-components',
      '@babel/plugin-proposal-optional-chaining'
    ),
    // Example: Add Webpack alias
    addWebpackAlias({
      '@components': path.resolve(__dirname, 'src/components')
    })
  )(config, env);
};

module.exports = myOverrides;

In the example above:

We first apply the framework's config-overrides.js to the configuration.
Then, we use customize-cra (a popular library for customizing Create React App configurations) to add our own custom overrides, such as Babel plugins and Webpack aliases.
Update Your package.json Scripts: Ensure your package.json scripts are set up to use react-app-rewired instead of react-scripts. For example:

json

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

By following these steps, you can effectively extend or override the existing config-overrides.js provided by the framework SDK with your own custom configurations.