vue项目中jsx使用扩展运算符报错

具体问题

在写render函数的时候发现使用扩展运算符时突然报错

报错如下

./demo.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/cascader-panel/src/cascader-menu.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: D:\demo\demo.vue: This API has been removed. If you're looking for this functionality in Babel 7, you should import the '@babel/helper-module-imports' module and use the functions exposed  from that module, such as 'addNamed' or 'addDefault'.

看错误感觉是babel配置的问题，查看了package.json文件，项目中依赖如下：

"@babel/core": "^7.10.3",
"babel-plugin-transform-vue-jsx": "^3.7.0"

于是去vue官网看了一下文档，发现babel-plugin-transform-vue-jsx这个插件适配的是babel@6.x，如果想要兼容7.x，需要使用@vue/babel-preset-jsx这个插件

解决方案

安装插件

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

设置.babelrc文件

{
  "presets": ["@vue/babel-preset-jsx"]
}

这样就可以成功解决上面的问题啦~

附上vue中使用jsx的语法文档：github.com/vuejs/jsx