一、报错内容

17:33:41  -  Building for production...
17:34:13   ERROR  Failed to compile with 5 errors5:34:09 PM
17:34:13
17:34:13   error  in ./src/layout/components/Sidebar/Item.vue?vue&type=script&lang=js&
17:34:13
17:34:13  Syntax Error: Thread Loader (Worker 0)
17:34:13  /data/jenkins/jenkins/workspace/projectname/src/layout/components/Sidebar/Item.vue: Support for the experimental syntax 'jsx' isn't currently enabled (20:19):
17:34:13
17:34:13    18 |
17:34:13    19 |     if (icon) {
17:34:13  > 20 |       vnodes.push(<svg-icon icon-class={icon}/>)
17:34:13       |                   ^
17:34:13    21 |     }
17:34:13    22 |
17:34:13    23 |     if (title) {
17:34:13
17:34:13  Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
17:34:13  If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
17:34:13   ERROR  Build failed with errors.

二、问题分析

从字面上看就是：当前没有启用对实验性语法“jsx”的支持，这个是属于Babel 配置的错误。
解决方案也很简单：.babelrc 配置文件中添加@vue/babel-preset-jsx即可

但是奇怪的现象是，我本地运行是没有问题的，但是一到服务器运行就失败了。
难怪同事会说，你先自查以下是否有漏提交的文件。

等会~这个文件怎么这么熟悉呢？才想起来自己使用的是IDEA开发
之前都是导入的别人的文件，不会注意这些，于是在忽略的文件和文件夹中能找到他们。
果然~~~~一看忽略的文件和文件夹中，果然有他们。。

三、问题解决

新增这个文件，重新运行即可。

文件内容如下:

module.exports = {presets: [// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app'@vue/cli-plugin-babel/preset'],'env': {'development': {// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.'plugins': ['dynamic-import-node']}}
}

五、Babel介绍

5.1 诞生背景

写es6+语法时很方便，什么promise、async await`，可是es6+语法写的虽然很酸爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，在好的语法在好的特性又有什么用？

这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容。

5.2 Babel 是什么？

Babel 是一个 JavaScript 编译器，它能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；

5.3 Babel 内部原理

Babel 内部原理是将 JS 代码转换为 AST，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。

5.4 Babel 插件系统

Babel 的核心模块 @babel/core，@babel/parser，@babel/traverse 和 @babel/generator 提供了完整的编译流程。而具体的转换逻辑需要插件来完成。

在使用 Babel 时，我们可通过配置文件指定 plugin 和 preset。而 preset 可以是 plugin 和 preset 以及其他配置的集合。Babel 会递归读取 preset，最终获取一个大的 plugins 数组，用于后续使用。

5.5 Babel 中常见 presets

@babel/preset-env
@babel/preset-typescript
@babel/preset-react

【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled相关推荐

Support for the experimental syntax ‘classProperties‘ isn‘t currently enabled
环境 React 16.13 出错信息: 出错的原因: Support for the experimental syntax 'classProperties' isn't currently en ...
Support for the experimental syntax 'decorators-legacy' isn't currently enabled 异常解决
问题描述:为React项目添加装饰器的时候"@"符号无法进行转议处理解决方案: 1. 执行git add . git add . 2.执行git commit -am " ...
Support for the experimental syntax 'dynamicImport' isn't currently enabled
在研究vue代码中动态加载组件遇到这样的问题,记录解决方法: 1.安装@babel/plugin-syntax-dynamic-import yarn add @babel/plugin-syntax ...
关于报错Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled
报错原因装饰器写法不被支持解决办法 bable转码 npm install @babel/plugin-proposal-decorators 配置package.json "babel ...
Support for the experimental syntax ‘decorators‘ isn‘t currently enabled
webpack学习 babel的配置文件有问题,在敲配置文件时注意一定要放在根目录具体配置查看 https://babeljs.io/
调用后台接口返回报错前端隐藏提示_前端异常监控解决方案研究（转）
前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...
❤️《大前端—Babel》
<大前端-Babel> 1.简介 ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行. Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行 ...
LayUI表格初始化错误（请求异常，错误提示：parsererror）
最近刚使用layui,不得不说挺强大的!! 下面是本人在layui初始化表格时踩的坑表格初始化失败,并提示(请求异常,错误提示:parsererror) 首先说一下,这个是因为给表格初始化的参数有问 ...
在使用Navicat for MySQL 出现异常“You have an error in your SQL syntax......“
在使用Navicat for MySQL 出现异常"You have an error in your SQL syntax......" 参考文章: (1)在使用Navicat ...

【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled