Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

@Jonny-china
Copy link

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
Copy link
Member

Could you provide a code snippet as a reproduction?

@Jonny-china
Copy link
Author

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
Copy link
Member

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.

@Jonny-china
Copy link
Author

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

haoqunjiang added a commit to vuejs/vue-cli that referenced this issue Mar 12, 2021
This was referenced Mar 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment