具体问题
在写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