React-app-rewired: ERROR: The "getBabelLoader" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins

[elyran]

I know about https://github.com/timarney/react-app-rewired/issues/348 .
The code is still broken, I'm still getting an error.
New CRA project.

package.json:

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "BROWSER=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "customize-cra": "^0.2.12",
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewired": "^2.1.3"
  }
}

[dawnmist]

What is the contents of your config-overrides.js file?

[elyran]

config-overrides.js:

const rewireEslint = require('react-app-rewire-eslint')

module.exports = function override(config, env) {
  config = rewireEslint(config, env)

  return config
}

[dawnmist]

The react-app-rewire-eslint plugin was written for react-app-rewired 1.x using Webpack 3. It has not been updated (nor is it intended to be updated) for Webpack 4. This means it is not compatible with react-app-rewired versions 2.0 and above.

The section you quoted in the heading of this issue actually tells you _exactly_ what you need to do in order to get this functionality. You need to use/import the plugin from customise-cra instead of from the old react-app-rewire-eslint package.

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

module.exports = override(
  useEslintRc(path.resolve(__dirname, '.eslintrc'))
);

[jasondiazg]

Hi @dawnmist, how can I use my react-app-rewired configuration with customize-cra configuration?

Right now I have this configuration in my config-overrides.js file:

module.exports = (config, env) => {
  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false,
    }
  };
  return config;
};

But now I want to use customize-cra as well. How can I do it? Thanks for your help.

[jasondiazg]

I fixed it using the function disableChunk in my config:

const { override, useEslintRc, disableChunk } = require('customize-cra');
const path = require('path');

module.exports = override(
  useEslintRc(path.resolve(__dirname, '../../.eslintrc.json')),
  disableChunk()
);

[dawnmist]

@jasondiazg In future, you'll get better responses about how to use customize-cra from the team at customize-cra. Customize-cra has been written by another team who kindly stepped in to maintain new rewires for react-app-rewired after the move by CRA to use webpack 4, and as a result the best people to ask about how to use customize-cra is the team who wrote and maintain it. :)

For future reference, if you need to create a custom function for customize-cra that they didn't have an override function for you could wrap it as follows (based on their pre-written overrides):

const myCustomFunc = () => (config) => {
  // do stuff with config...
  return config;
};

module.exports = override(myCustomFunc());