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

[kikuomax]

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]

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]

[wesdevpro]

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

[kikuomax]

@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]

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]

All errors successfully went away

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

[kikuomax]

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