关于 injectBabelPlugin is not a function

摘要：在学习ant design的自定义主题这一功能时候，官方给到创建config-overrides.js文件，并且写入如下代码, 查阅资料发现react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired，react-app-rewired的新版本删除所有方法injectBabelPlugin

在学习ant design的自定义主题这一功能时候，官方给到创建config-overrides.js文件，并且写入如下代码：

const { injectBabelPlugin } = require('react-app-rewired');
 
  module.exports = function override(config, env) {
   config = injectBabelPlugin(
     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
     config,
   );
    return config;
  };

发现项目不能运行，产生如下错误信息

主要因为injectBabelPlugin is not a function

查阅资料发现react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired，react-app-rewired的新版本删除所有方法injectBabelPlugin，这些方法被移动到一个名为'customize-cra'的新包中了。修改方法：

1.确保已经下载customize-cra，less-loader
2.修改config-overrides文件为

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": "#1DA57A" }
  // })
);

然后重新npm run start，运行成功！

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2041