ntohq/buefy-next

[Warning] [Vue warn]: Property "style" was accessed during render but is not defined on instance

kikuomax opened this issue · 7 comments

kikuomax commented

Overview of the problem

Buefy version: [0.1.3-decc2c0e9fc94eef0715566892e86655c901ee82]
Vuejs version: [3.3.10]
OS/Browser: Safari/macOS

Description

If we open the documentation pages of Buefy-next, we will see a lot of warnings like the following:

[Warning] [Vue warn]: Property "style" was accessed during render but is not defined on instance. (34) (chunk-NPKMWJMV.js, line 1393)
"
"
" at <CodepenEdit"
"code=\"<template>\\n    <section>\\n        <b-field>\\n            <b-tag>Tag label</b-tag>\\n        </b-field>\\n        <b-field>\\n            <b-tag rounded>Rounded tag label</b-tag>\\n        </b-field>\\n    </section>\\n</template>\\n\\n<script lang=\\\"ts\\\">\\nimport { defineComponent } from 'vue'\\nimport { BField, BTag } from '@ntohq/buefy-next'\\n\\nexport default defineComponent({\\n    components: {\\n        BField,\\n        BTag\\n    }\\n})\\n</script>\\n\""
"title=undefined"
">"
"
"
" at <Example"
"component="
{components: Object, __hmrId: "a390a8f3", render: function, __file: "/buefy/packages/docs/src/pages/components/tag/examples/ExSimple.vue"}
"code=\"<template>\\n    <section>\\n        <b-field>\\n            <b-tag>Tag label</b-tag>\\n        </b-field>\\n        <b-field>\\n            <b-tag rounded>Rounded tag label</b-tag>\\n        </b-field>\\n    </section>\\n</template>\\n\\n<script lang=\\\"ts\\\">\\nimport { defineComponent } from 'vue'\\nimport { BField, BTag } from '@ntohq/buefy-next'\\n\\nexport default defineComponent({\\n    components: {\\n        BField,\\n        BTag\\n    }\\n})\\n</script>\\n\""
"vertical=\"\""
">"
"
"
" at <Tag"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
Proxy {, …}
">"
">"
"
"
" at <RouterView>"
"
"
" at <Documentation"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
Proxy {, …}
">"
">"
"
"
" at <RouterView>"
"
"
" at <Buefy>"
"
"
" at <App>"

Steps to reproduce

  1. Move to packages/docs:

    cd packages/docs

  2. Start a dev server:

    npm run dev

  3. Open http://localhost:5173 with your browser.

  4. Open the JavaScript console on your browser.

  5. Navigate to any component documentation page on your browser.

Expected behavior

No above warnings.

Actual behavior

Got warnings.

wesdevpro commented

According to the warning the problem occurs at line 53 of CodepenEdit.vue

My guess and according to this Stack overflow the style property is being accessed here but isn't defined in this scope.

I will start following this lead to see what I can turn up

wesdevpro commented

@kikuomax there is no style prop of any kind that is accessible. Is there any logic I am missing here?

kikuomax commented

@wesdevpro I do not believe this.style is meaningful in this context. So the question is whether we can simply disregard and remove style here. Did style have meaning in the past? If so, how was it specified?

wesdevpro commented

They are using this.style with a ternary expression to set the prop editors to 111 or 101. I don't see the editors prop anywhere else my guess is we can simply remove it? I will attempt to remove the prop to see if anything happens

wesdevpro commented

All errors successfully went away
image

It is still concerning to me of the introduction of that prop 🤔 Like did they add it for no reason 🤣?

kikuomax commented

@wesdevpro It seems CodepenEdit came out of nowhere in this commit. And it already included the seemingly invalid this.style.

  • 👍1