Property "message" was accessed during render but is not defined on instance. - Vue 3 & TypeScript

[dannysmc95]

Version

3.0.0-rc.11

Reproduction link

https://.com/dannysmc95/vue3-issue1

Steps to reproduce

!! Please note I have added vue-next as Vue3 is NOT available on the bug reporter, this was created using @vue/cli using the Vue 3 Preview feature.

1. Pull the repo link, and do npm install,
2. Run npm run serve,
3. View the page in the browser, with the vue-devtools installed and the console open (I use Chrome),
4. Uncomment the public random line,
5. See the error in the console,

What is expected?

There should be no error and the p tag should still display the text.

Unless I am doing something wrong, but I don't believe so, I have removed the access definitions (public, private, etc), and no change.

What is actually happening?

I am seeing an error relating to reactivity, and it breaks the page, stopping the p tag from showing and forcing me to refresh the page each time, which kind of defeats the point of HMR.

See error output:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "message" was accessed during render but is not defined on instance.
at <Anonymous onVnodeUnmounted=fn ref=Ref< null > >
at
at
warn @ runtime-core.esm-bundler.js?5c40:38
get @ runtime-core.esm-bundler.js?5c40:5696
render @ Home.vue?bb51:3
renderComponentRoot @ runtime-core.esm-bundler.js?5c40:535
componentEffect @ runtime-core.esm-bundler.js?5c40:4286
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4269
mountComponent @ runtime-core.esm-bundler.js?5c40:4227
processComponent @ runtime-core.esm-bundler.js?5c40:4183
@ runtime-core.esm-bundler.js?5c40:3788
componentEffect @ runtime-core.esm-bundler.js?5c40:4373
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:359
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:259
queueCb @ runtime-core.esm-bundler.js?5c40:281
queuePostFlushCb @ runtime-core.esm-bundler.js?5c40:287
eval @ runtime-core.esm-bundler.js?5c40:473
reload @ runtime-core.esm-bundler.js?5c40:459
eval @ runtime-core.esm-bundler.js?5c40:499
eval @ VM1034 Home.vue:14
./src/views/Home.vue @ app.js:1057
webpack_require @ app.js:849
hotApplyInternal @ app.js:750
hotApply @ app.js:412
(anonymous) @ app.js:387
Promise.then (async)
hotUpdateDownloaded @ app.js:386
hotAddUpdateChunk @ app.js:362
webpackHotUpdateCallback @ app.js:58
(anonymous) @ app.28fcc07….hot-update.js:1

---

!! Please note I have added vue-next as Vue3 is NOT available on the bug reporter.

[posva]

@dannysmc95 I transferred this to the correct repository

[dannysmc95]

Thanks @posva

[dannysmc95]

Sorry to be a pain, but how I get the update once it's applied? As if I do: npm outdated every single package is outdated and offers me to update from 3.0.0-0 to 2.x.x instead? Essentially, how do updates work for Vue 3 preview?

[llabati]

If you work with "setup" (Composition API), you must return, in an object, your data, properties and regular functions. Example: setup(){
const name = ref('')
return { name } // this line will solve your problem.
}

[cambierjulien]

Just to add to @llabati 's response: I had to put the opening bracket on the same line as the return. I had it on the next line, which did not work.
I had absolutely no other error than the render one.

(I respond to this closed issue because it's the first one I found while googling the issue.)

[nicolidin]

I have the same problem working with the Option API and thus with the @Options decorator (without using setup).
When I use the vue-devtools, all my component are Anonymous:

However, this bug does not occur if I precize name="component name" inside the decorator Options like that:

@Options({
    name: "MyComponent"
})
export default class MyComponent extends Vue {

It's sadly a duplication...
Hope you can fix this problem @posva @ktsn

(version used: "vue-class-component": "8.0.0-beta.4",)

[bobohuochai]

The same problem with @nicolidin ... (verison used: 8.0.0-rc.1)