React------The "injectBabelPlugin" helper has been deprecated as of v2.0. 报错

最新推荐文章于 2022-04-15 11:14:47 发布

原创最新推荐文章于 2022-04-15 11:14:47 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React #customize-cra #injectBabelPlugin

React 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决使用Antd组件库时与React App Rewired的兼容性问题，通过安装并配置customize-cra，调整babel导入，及LESS加载器设置，确保项目的顺利运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Antd,会有报错

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra，否则会出现如下的问题。

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/
arackaf/customize-cra#available-plugins
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_cnode@0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_cnode@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-04-25T06_55_17_287Z-debug.log

安装customize-cra

npm install customize-cra --save-dev

yarn add customize-cra --dev

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


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

记得关闭项目，重新启动

详细参见：

https://github.com/arackaf/customize-cra

https://github.com/timarney/react-app-rewired/issues/348