When writing a jsx function in setup, h = this.$createElement will be automatically injected

[Jonny-china]

When writing a jsx function in setup, h = this.$createElement will be automatically injected, but there is no this in setup, and h has been injected import {h} from '@vue/composition-api'

babel.config.js

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        jsx: {
          compositionAPI: true
        }
      }
    ]
  ]
}

package.json dependencies

{
  "dependencies": {
    "@vue/composition-api": "^1.0.0-rc.3",
    "clipboard": "2.0.6",
    "core-js": "^3.9.1",
    "dayjs": "^1.10.4",
    "element-ui": "^2.15.1",
    "lodash-es": "^4.17.21",
    "throttle-debounce": "1.0.1",
    "vue": "2.6.12",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "9.1.2"
  },
  "devDependencies": {
    "@babel/runtime-corejs3": "^7.13.10",
    "@intervolga/optimize-cssnano-plugin": "^1.0.6",
    "@types/clipboard": "^2.0.1",
    "@types/jest": "^26.0.20",
    "@types/lodash-es": "^4.17.4",
    "@types/throttle-debounce": "^1.1.1",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/cli-plugin-babel": "~4.5.11",
    "@vue/cli-plugin-eslint": "~4.5.11",
    "@vue/cli-plugin-typescript": "~4.5.11",
    "@vue/cli-plugin-unit-jest": "~4.5.11",
    "@vue/cli-service": "~4.5.11",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^7.21.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-vue": "^7.7.0",
    "highlight.js": "^9.18.5",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.3.9",
    "normalize.css": "^8.0.1",
    "prettier": "^2.2.1",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.1.1",
    "thread-loader": "^3.0.1",
    "typescript": "~4.2.3",
    "vue-highlight.js": "^3.1.0",
    "vue-loader": "^15.9.6",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "2.6.12",
    "vuepress": "^1.8.2",
    "vuepress-plugin-container": "^2.1.4",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-node-externals": "^2.5.2"
  },
}

[weineel]

I solved it by the following method:

1. feat: add @vue/composition-api support jsx-vue2#142, Inject h globally.
2. https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection, setup use arrow function.

[dyf19118]

I solved it by the following method:

1. feat: add @vue/composition-api support jsx-vue2#142, Inject h globally.
2. https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection, setup use arrow function.

Setup use arrow function works for me. It seems like the problem was caused by the auto-inject-h behavior of plugin @babel/plugin-transform-typescript used in my project.