vue项目使用可选链操作符编译报错问题

已于 2022-04-26 10:53:57 修改
阅读量5.6k 收藏 3
点赞数
分类专栏： vue 文章标签： 前端
于 2022-04-26 10:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39367226/article/details/124421384
版权
本文介绍了在Vue项目中遇到使用可选链操作符(`?.`)编译报错的问题，错误提示为不支持实验性语法'optionalChaining'。解决方法是安装`@babel/plugin-proposal-optional-chaining`依赖，并在`babel.config.js`中进行配置。
摘要由CSDN通过智能技术生成

vue项目使用可选链操作符编译报错问题

const a = b?.c?.d

报错如下：

Support for the experimental syntax ‘optionalChaining’ isn’t currently enabled
在这里插入图片描述

解决方案：

需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中

yarn add @babel/plugin-proposal-optional-chaining

在babel.confi

最低0.47元/天 解锁文章
果真zZ
关注
专栏目录
vue2中使用可选链（?. ??）操作符报错
weixin_47375788的博客
08-13 675
在ECMAScript 2020 (ES11) 中被引入，用于在尝试访问对象深层属性时避免抛出错误。如果你的Vue项目运行在不支持这些新特性的JavaScript环境中，你会遇到语法错误。在Vue 2中，如果你遇到使用可选链 (Optional Chaining) 操作符?时出现错误，很可能是因为你的项目使用的JavaScript环境不支持这些特性。）操作符，如果是vue2.0的项目则需要安装插件解析：babel-plugin-proposal-optional-chaining。
vue项目.可选链操作符浏览器报错提示编译失败
qq_44716001的博客
06-16 587
【代码】vue项目.可选链操作符浏览器报错提示编译失败。
vue template 里使用可选链操作符( ?. )报错Unexpected token . in _s(item?.publishInfo?.remark) Raw expres
ZYX10077的博客
09-20 1433
vue template 里使用可选链操作符( ?. )报错
Mac vue3 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
北纬先生
03-25 499
Mac vue3 使用可选链（?.）和 双问号 （??） 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
vue-使用可选链操作符编译报错问题
qq_42164957的博客
10-11 4184
vue-使用可选链操作符编译报错问题
vue2中template里使用可选链操作符( ?. )报错解决方案
qq_44741577的博客
04-30 1753
版本，同时 node 版本升级到。不支持可选链操作符，升级。
vue项目启动出现可选链?:操作符解析失败
michiko98的博客
05-17 1918
）是：@babel/plugin-proposal-nullish-coalescing-operator。问题截图：Module parse failed: Unexpected token。，本地npm run serve启动时，之前都正常，这次报错了，无法启动。问题描述：vue项目中引入了其他npm包，包中使用可选链操作符。
vue2.X使用可选链操作符编译报错问题
最新发布
十一
05-16 808
可选链操作符是ES2020中推出的新语法，允许我们不需要校验当前属性的类型去尝试访问子属性。.c?.dnpm install --save-dev @babel/plugin-proposal-optional-chaining -S //解析可选链语法插件npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator // 双问号语法插件。
vue可选链操作符报错
07-28
- *2* [vue-使用可选链操作符编译报错问题](https://blog.csdn.net/qq_42164957/article/details/127258232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
vue小技巧: 升级Babel支持可选链和合并空值运算符
weixin_44395929的博客
04-14 5610
//从今天开始, 每天总结一个vue实际开发中的应用点(以下内容是个人认为的最佳实践, 如果有异议, 可以评论留言呐) //当然了, 留言我不一定改, 不留言我肯定不改 //重点内容我会加重字体, 可以提炼 一、babel 作用: (我偷懒了,直接用官网介绍) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 据我所知, 无论是webpack项目还是vite项目都需要使用到babe
npm编译报错You may need an additional loader to handle the result of these loaders
邓邓子的博客
05-06 5600
目录一、问题描述一、问题描述 一、问题描述 配置 uni-app 自动化部署开发环境时，使用 NODE_ENV=test 参数，执行打包命令： npm install cross-env -g && npm install && npm run build:h5-test 报错： ERROR Failed to compile with 4 errors error in /home/source/shop-uniapp/components/m-buy/goo
vue框架使用
qq_45645848的博客
01-11 1240
前端vue基础知识总结，汇总
【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录
热门推荐
向着光芒的女孩
07-30 1万+
使用场景：发现项目有些旧代码多层调用某个对象的属性，由于目标对象可能没那个属性，就导致报错，之前研究es6新特性时发现可以用?.来判断某个对象是否有某个属性来赋值。 测试源代码： var a = { name: 'hello' } var b = a?.name; console.log('a',a,'b',b) 在vue-cli中发现用不了： 后面尝试去解决，成功后浏览器控制台能打印出来 解决过程 因为我们这个项目是用的vue-element-admin,我自己在另外一个vue-cli工程.
js可选链使用时报错Support for the experimental syntax ‘chaining‘ isn‘t currently enabled 问题记录-安装bable依赖及配置
yh8899abc的博客
09-18 5008
问题回顾 vue2 项目中使用了可选链 let a = videoInfo?.videoUrl ?? ''; 然后就报错 解决方案 // 首先安装babel npm install --save-dev @babel/core @babel/cli @babel/preset-env // 安装 npm i @babel/plugin-proposal-optional-chaining --save-dev // 或者安装指定版本（与上面一条二选一） npm install @babel/plug
【操作符 ?. 、?? 、 ??=报错】
林大胖的博客
12-12 588
在项目中使用等新语法特性时出现报错。
解决：vue项目构建出现可选链?:操作符解析失败
qq_38969618的博客
06-22 8155
vue中使用可选链操作符构建报错。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值