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 #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());