How to use the customize-cra.addBabelPlugins function in customize-cra

})

const addLoadablePlugin =  config => {
  config.plugins.push(
    new LoadablePlugin()
  )

  config.plugins[0].options.inject = false

  return config
}

module.exports = override(
  process.env.NODE_ENV === 'production' && addLoadablePlugin,
  disableEsLint(),
  ...addBabelPlugins('transform-imports', '@loadable/babel-plugin', 'transform-react-remove-prop-types'),
  addWebpackAlias({ ...aliases, 'lodash-es': 'lodash' }),
  hasCustomConfigOverrides && require(appConfigOverrides)
)

}),
  babelInclude([
    path.resolve("src"),
    path.resolve(modulesPath, "react-native-elements"),
    path.resolve(modulesPath, "react-native-ratings"),
    path.resolve(modulesPath, "react-native-status-bar-height"),
    path.resolve(modulesPath, "react-native-vector-icons"),
    path.resolve(modulesPath, "react-native-safe-area-view"),
    path.resolve(modulesPath, "react-navigation"),
    path.resolve(modulesPath, "react-native-tab-view"),
    path.resolve(modulesPath, "react-native-touchable-scale"),
    path.resolve(modulesPath, "expo-linear-gradient"),
    path.resolve(modulesPath, "@react-navigation", "native"),
    path.resolve(modulesPath, "react-native-gesture-handler-web"),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties",
  ),
  addWebpackAlias({
    "react-native-gesture-handler": "react-native-gesture-handler-web",
  })
);

module.exports = (config, env) => {
  config = override(
    enableEslintIgnore(),
    ...addBabelPlugins(
      'babel-plugin-emotion',
      'babel-plugin-preval',
      'babel-plugin-transform-do-expressions'
    ),
    addDecoratorsLegacy(),
    babelInclude([resolveApp('src')])
  )(config);

  config.target = 'electron-renderer';
  config = rewireReactHotLoader(config, env);
  return config;
};

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

module.exports = {
  webpack: override(
    addWebpackAlias({
      "#": path.resolve(__dirname, "./src"),
      "react-dom": "@hot-loader/react-dom"
    }),
    addBundleVisualizer({}, true),
    ...addBabelPlugins("emotion", "react-hot-loader/babel")
  ),
  jest: config => ({
    ...config,
    setupFilesAfterEnv: ["/.jest/setup.js"],
    moduleNameMapper: { "#(.*)$": "/src/$1" },
    coverageDirectory: "/.coverage"
  })
};

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

module.exports = override(...addBabelPlugins('ramda'))

useEslintRc(),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': "#4777e8",
            '@link-color': '#4777e8',
        },

    }),

    addWebpackResolve({
        alias: {'@': path.resolve(__dirname, 'src')}
    }),


    addBabelPlugins(
        "@babel/plugin-syntax-object-rest-spread",
        ['@babel/plugin-proposal-decorators', {'legacy': true}]
    ),
    addBabelPresets([
        '@emotion/babel-preset-css-prop'
    ]),

    fixBabelImports('antd', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),


);