Property "message" was accessed during render but is not defined on instance. - Vue 3 & TypeScript
See original GitHub issueVersion
3.0.0-rc.11
Reproduction link
https://github.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.
- Pull the repo link, and do npm install,
- Run npm run serve,
- View the page in the browser, with the vue-devtools installed and the console open (I use Chrome),
- Uncomment the public random line,
- 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<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
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
patch @ 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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (1 by maintainers)
Top GitHub Comments
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:
It’s sadly a duplication… Hope you can fix this problem @posva @ktsn
(version used: “vue-class-component”: “8.0.0-beta.4”,)
The same problem with @nicolidin … (verison used: 8.0.0-rc.1)