解决create-react-app脚手架创建的项目中按需引入ant-design时 报错TypeError: injectBabelPlugin is not a function的问题

最新推荐文章于 2024-05-03 21:53:44 发布
最新推荐文章于 2024-05-03 21:53:44 发布
阅读量903 收藏
点赞数 1
分类专栏： React 已解决问题 文章标签： react ant-design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41846861/article/details/86561674
版权

React：create-react-app脚手架项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

错误形式

运行npm start时报如下错误：
TypeError: injectBabelPlugin is not a function
如下图：
在这里插入图片描述

错误原因

应该是react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired

解决办法

对react-scripts进行降级处理

// 在terminal输入下列命令
npm install react-app-rewired@2.0.2-next.0

如图：
在这里插入图片描述
完成后在再输入命令npm start就可以正常运行项目了。

Dream_Lee_1997
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-fps-app:快速创建 ReactVue 脚手架，类似 `create-react-app`，使用 WebpackViteSnowpack 等技术
05-24
create-fps-app目的此项目是一个类似 create-react-app 的脚手架，用于生成一个完整的项目，目前暂时只支持 react-typescript，未来考虑支持如下模板：纯 react 模板 Snowpack 版本react-typescript 模板 Snowpack ...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。 目录 已添加到应用程序的依赖项 还原 react-redux Redux-Saga 一成不变的 React路由器域 react-router-redux ...
【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
毛毛虫博客
08-04 2007
ant-design按需加载，使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误： TypeError: injectBabelPlugin is not a function 原因好像说是react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired 解决方法，对react-scripts进行降级处理 npm...
关于 injectBabelPlugin is not a function
路了个飞的博客
01-18 2233
在学习ant design的自定义主题这一功能时候，官方给到创建config-overrides.js文件，并且写入如下代码： const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBab...
正确解决TypeError: xxx is not a function异常的有效解决方法
最新发布
wbajsjhhhhh的博客
05-03 6337
正确解决TypeError: xxx is not a function异常的有效解决方法
2019年01月14日-按需引入antd遇到injectBabelPlugin is not a function问题-后续官网及时给出了正确方法，不再有此问题
chenxiaoyi0207的博客
01-14 2239
一、按官网方法下载安装配置 【传送带->antd->在 create-react-app 中使用】 create-react-app创建react项目 $ npm install -g create-react-app yarn $ create-react-app antd-demo $ cd antd-demo $ yarn start 引入antd $ yarn add...
React项目中引入antd库失败
qq_35692783的博客
05-11 1910
参考官方链接：https://ant.design/docs/react/use-with-create-react-app-cn 先通过 create-react-app 创建项目 然后 npm add antd 安装并引入antd 接着就可以在js文件中导入antd库并使用了 import Button from 'antd/lib/button'; 不过此时的按钮是这样的 想要和官方展示...
(解决方案)Vue-cli/文件首字母红色波浪线/Parsing error:No babel config...
Le_12345679的博客
03-10 1831
1. 找到当前项目的 package.json文件； 2. 在 “eslintConfig” 对象内添加 `"requireConfigFile" : "false",`即可解决问题；
npx create-react-app xxx创建项目报错的解决办法
11-21
根据React官方文档（上图）可以发现，此时并不需要安装create-react-app工具，只要你的node >= 8.10 && npm >= 5.6，就可以直接使用npx create-react-app命令来创建项目。 报错 好的:OK_hand:，那就根据上面的来呗，...
create-react-app-with-redux：：star2：简单的redux实现已添加到使用create-react-app创建的应用程序中
02-05
使用Redux create-react-app ... 这是Redux的一个准系统实现，该React是使用create-react-app生成的React应用create-react-app ，然后使用npm run eject 。 :light_bulb: 该存储库包含两个提交，并且只有两个提交。 ...
vue解决：Parsing error: No Babel config file detected for ....
TangMonk的博客
10-07 3679
方法一：vsCode打开文件夹时，打开vue项目根路径如：myProject。
ESlint发生 Parsing error 错误的解决办法
qq_44884577的博客
04-13 3万+
ESlint发生 Parsing error 错误的解决办法
【小程序】 解决 Function(...) is not a function问题
不忘初心，坚定道路！
07-22 1万+
在小程序中，只要写了ayncawait（或者是你引入的库中写了），如果你使用了babel编译且babel的版本大于7，则会出现这个问题。
TypeError: prettier.resolveConfig.sync is not a function
qq_45118747的博客
10-09 2601
TypeError: prettier.resolveConfig.sync is not a function 解决方案：尝试使用eslint-plugin-prettier ^4.2.1 和 prettier ^2.8.8 进行搭配
Webpack创建react项目的时候babel报错：TypeError: this.setDynamic is not a function
xiamocsdn的博客
07-27 3345
今天用webpack搭建一个react项目的时候总是报错： Module build failed (from ./node_modules/_babel-loader@8.0.6@babel-loader/lib/index.js): TypeError: this.setDynamic is not a function 显示模块构建失败，并且问题出在babel里。 查到网上有人出现过和我...
TypeError: this.getOptions is not a function 的解决
hyupeng1006的博客
01-06 1万+
React这个实际上就是 sass-loader 的版本过高或过低，与当前node版本不对应，不兼容 getOptions 函数方法，所以需要对 sass-loader 进行升级或降级处理。1、命令行卸载node-sass和sass-loader，重新安装跟你当前node版本对应的node-sass和sass-loader。2、或者可以删除node_modules文件夹，直接修改package.json里sass-loader和node-sass里的版本，然后npm install四、node。
ESlint发生”Parsing error“错误的解决办法
热门推荐
甘焕的博客
07-17 3万+
按照grunt-eslint的默认配置，发生了“Parsing error: ‘import’ and ‘export’ may appear only with ‘sourceType: module’”错误。
【vue-cli3】vue.config.js中遇到的那些坑
weixin_33936401的博客
10-25 1万+
vue-cli升级到3.x版本之后，构建出来的项目比较简练，但是没有了webpack的显式配置，如果想要脚手架适用自己的项目，就需要配置vue.config.js，具体如何配置官网也给出了详细说明，可以参考官网，vue.config.js配置项说明，以下为本人配置过程中遇到的一些坑，不对的地方或有更好的解决办法也希望大家能及时指出，欢迎大家一起探讨。 之前vue-cli2.x版本显式配置webpa...
create-react-app创建ts项目
08-17
要使用create-react-app创建TypeScript项目，您可以按照以下步骤进行操作： 1. 首先，保您已经安装了Node.js和npm。您可以在终端或命令提示符中运行以下命令来验证安装是否成功： ``` node --version npm --...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值