jsx-vue2 icon indicating copy to clipboard operation
jsx-vue2 copied to clipboard

Error when using vModel in Composition API component

Open TheoBP opened this issue 3 years ago • 17 comments

I'm getting the following error when using vModel in a JSX/TSX file with the latest version:

Cannot read property 'body' of undefined (babel-sugar-composition-api-render-instance\dist\plugin.js:1:1179)

Packages:

{
  "name": "vmodel",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/composition-api": "^1.0.0-beta.18",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.5.8",
    "@vue/cli-plugin-eslint": "^4.5.8",
    "@vue/cli-plugin-pwa": "^4.5.8",
    "@vue/cli-plugin-router": "^4.5.8",
    "@vue/cli-plugin-typescript": "^4.5.8",
    "@vue/cli-plugin-vuex": "^4.5.8",
    "@vue/cli-service": "^4.5.8",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "^4.0.3",
    "vue-template-compiler": "^2.6.11"
  }
}

Component (TSX):

import { defineComponent, reactive } from '@vue/composition-api'

export default defineComponent({
  setup() {

    const state = reactive<{ search: string | null }>({
      search: null
    })

    return () =>
      <div>
        <h1>This is a page.</h1>

        <input type="text" placeholder="Search:" vModel={state.search} />
      </div>
  }
})

Babel config:

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset", {
        jsx: {
          compositionAPI: true
        }
      }
    ]
  ]
}

TheoBP avatar Oct 30 '20 10:10 TheoBP