vue-cli中如何配置jsx?

现在的项目需要用到jsx,项目中已经安装 babel-plugin-syntax-jsxbabel-plugin-transform-vue-jsxbabel-helper-vue-jsx-merge-propsbabel-preset-es2015等插件 但是就是报错 是jsx语法写错了么?

图片描述

图片描述

阅读 12.7k
3 个回答

然而吾辈还是死掉了。。。

环境

  • vue-cli 3
  • Windows 10

错误信息

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [路径]\RegConfig.vue: [路径]\RegConfig.vue: Duplicate declaration "h" (This is an error on an internal node. Probably an internal err
or.)

package.json

"devDependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.3.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "git-rev-sync": "^1.12.0",
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^1.18.2",
    "prettier-eslint-cli": "^5.0.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^11.0.0",
    "stylelint-config-prettier": "^5.2.0",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-order": "^3.1.1",
    "stylelint-prettier": "^1.1.1",
    "stylelint-scss": "^3.11.1",
    "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
    "vue-router": "^3.1.3",
    "vue-template-compiler": "^2.6.10"
}

babel.config.js

module.exports = {
    presets: ['@vue/app', '@vue/babel-preset-jsx'],
}

楼主有什么好的方法解决么?

采用vue cli3创建的项目(babel版本为7),不需要按照文档添加"presets": ["@vue/babel-preset-jsx"]

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

如果你项目的babel版本为6,请参考楼上提供的文档,或者看Element2.13.2的源码也可以。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题