Using react-app-rewired to report errors when loading on demand in antd

run yarn start to report an error injectBabelPlugin is not a function
Code is the same as antd official website

Apr.18,2022

cause of error: react-app-rewired deletes the new version of injectBabelPlugin for all methods, which are moved to a new package called 'customize-cra'.
modify method:
1. Make sure you have downloaded customize-cra,less-loader
2. Modify the config-overrides file to

const {
    override,
    fixBabelImports,
    // addLessLoader,
  } = require("customize-cra");
  
  
  module.exports = override(
    fixBabelImports("import", {
      libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
    }),
    // addLessLoader({
    //   javascriptEnabled: true,
    //   modifyVars: { "@primary-color": "-sharp1DA57A" }
    // })
  );

the personal test is valid. You can try it. If it is wrong, you can study it again

.

it's OK after downgrading react-app-rewired

yarn add react-app-rewired@2.0.2-next.0

react-scripts destroys react-app-rewired after upgrading to 2.1.2: https://github.com/timarney/r...

then react-app-rewired upgrades to 2.x and directly kills all helpers: https://github.com/timarney/r...

https://github.com/ant-design...


can you take a look at your package.json file


I have the same problem. It used to be normal.


Brother, have you solved it? I have the same problem. The key is to install antd today. It can't run. It won't work until after npm install.


injectBabelPlugin is not a function
this is the same error I reported. If there is a solution, please @ me


with the latest version, you can see the configuration here in https://github.com/arackaf/cu....

it can be supported by the following configuration

const {
  addDecoratorsLegacy,
  disableEsLint,
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");

module.exports = override(
  addDecoratorsLegacy(),
  disableEsLint(),
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {"@primary-color": "-sharp1DA57A"}
  })
);
Menu