vue项目启动报错：Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

woowen！

已于 2022-04-06 09:21:19 修改

阅读量2.1w

点赞数 5

分类专栏： vue 遇到的问题文章标签： vue/cli jsx

于 2021-07-02 18:09:15 首次发布

本文链接：https://blog.csdn.net/q1ngqingsky/article/details/118421074

版权

vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

遇到的问题

26 篇文章

订阅专栏

在使用Vue+ElementUI的项目中，遇到启动时关于jsx语法的错误。问题源于表格组件的自定义列头renderHeader()方法。解决方法包括在.babelrc配置文件中引入@vue/babel-preset-jsx，通过yarn或npm安装相关依赖，并在.babelrc文件中设置presets。按照这些步骤操作后，重新启动项目，错误即可消除。

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

框架：vue+ElementUI

如图所示：在表格的最后一列操作处，当鼠标移上去时，要求提示语提示给用户

此处使用到了Element框架的el-table 的一个属性如下：

Table-column Attributes

代码如下：

<el-table>
    <el-table-column  label="操作" :render-header="renderHeader" align="center">
         <template slot-scope="scope">
                   <el-button v-if="scope.row.operation==='add'" type="text" @click="handleAddClick('add',scope.$index)">新增</el-button>
                    <el-button v-else type="text" @click="handleAddClick('del',scope.$index)">删除</el-button>
         </template>
    </el-table-column>
</el-table>


<script>
export default({

    methods: {
        renderHeader() {
                return (
                    <div>
                        <span>操作</span>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="一个品类分多个仓库入库可新增同品类"
                            placement="top-start"
                        >
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                );
            },
    }
})
<script>

当renderHeader()方法调用以后终端报错了！！！：Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

解决方案：

根据图中红色框中的提示语：

大致意思就是需要你在.babelrc 配置文件中添加@vue/babel-preset-jsx即可

步骤一：

Install the dependencies:

# for yarn:

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

# for npm:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save

步骤二：

在.babelrc文件中添加@vue/babel-preset-jsx，如下代码：

presets: ['@vue/babel-preset-jsx'],

这里是我项目中的 .babelrc 文件的具体代码

// .babelrc 文件
{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@vue/babel-preset-jsx" // 支持jsx语法
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties", // 支持classProperties语法
    "syntax-dynamic-import",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

}

步骤三：

保存后，重新启动项目即可

最后看下.babelrc文件的位置