jsx-vue2
jsx-vue2 copied to clipboard
Error when using vModel in Composition API component
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
}
}
]
]
}