vuejs/jsx-vue2

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

Jonny-china opened this issue Β· 4 comments

Jonny-china commented

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"
  },
}

image

haoqunjiang commented

Could you provide a code snippet as a reproduction?

Jonny-china commented

Could you provide a code snippet as a reproduction?

@sodatea please take a look at this https://github.com/Jonny-china/composition-api-jsx-demo , thank you.

haoqunjiang commented

It's because the dependency version isn't up-to-date πŸ˜‚

ΞΆ yarn list @vue/babel-preset-jsx
yarn list v1.22.10
warning Filtering by arguments is deprecated. Please use the pattern option instead.
β”œβ”€ @vue/babel-preset-app@4.5.11
β”‚  └─ @vue/babel-preset-jsx@1.1.2
β”œβ”€ @vue/babel-preset-jsx@1.2.4
└─ @vuepress/core@1.8.2
   └─ @vue/babel-preset-jsx@1.1.2
✨  Done in 1.19s.

Please run rm -rf node_modules yarn.lock and then reinstall the dependencies.

I should release a new patch of Vue CLI to force using the latest @vue/babel-preset-jsx version.

  • πŸ‘2
Jonny-china commented

@sodatea Thanks, it turned out to be the problem, it took me a long time.