Aminerman / vue-kinesis

Easily create complex interactive animations with Vue.js
https://www.aminerman.com/kinesis/
MIT License
1.47k stars 59 forks source link

Property "tag" was accessed during render but is not defined on instance #67

Closed mitjans closed 3 years ago

mitjans commented 3 years ago

I just installed lastest vue-kinesis version 2.0.4 and tried to use it in my Vue 3 project as follows:

yarn add vue-kinesis@next
import { createApp } from 'vue';
import VueKinesis from 'vue-kinesis';
import App from './App.vue';

createApp(App)
  .use(VueKinesis)
  .mount('#app');
<kinesis-container>
  <kinesis-element :strength="10">
    <Project />
  </kinesis-element>
</kinesis-container>

Where Project is one of my vue components, which is not displayed and i get the following warnings in the console:

runtime-core.esm-bundler.js:38 [Vue warn]: Property "tag" was accessed during render but is not defined on instance. 
  at <KinesisContainer> 
  at <MainContent> 
  at <App>

runtime-core.esm-bundler.js:38 [Vue warn]: Property "style" was accessed during render but is not defined on instance. 
  at <KinesisContainer> 
  at <MainContent> 
  at <App>
Aminerman commented 3 years ago

Well, I tried to create a Codesandbox with the same package version, and it seems to work fine https://codesandbox.io/s/fragrant-feather-jxp1x?file=/src/App.vue

Can you give me more details? Or a repository with a minimal code that reproduces this issue?

mitjans commented 3 years ago

I found the problem. I used DefinePlugin to remove a console warning, following this stackoverflow post:

  new DefinePlugin({
    __VUE_OPTIONS_API__: false,
  }),

If I remove this variable, vue-kinesis works as expected, but the console warning appears. Is there a way I can remove the warning and have vue-kinesis working at the same time?

Aminerman commented 3 years ago

What if you set it to true?

That's something I'm not aware of. If I understand well, you're dropping the options API, but kinesis uses it. But I don't know what to do in this case. Should I change all the code so it works with the composition API? It will take some time. I mean, it would mean that all the plugins should be migrated to the composition API just to take into account this use case? I don't know what to think about this.

Let me know if setting it to true changes anything?

mitjans commented 3 years ago

You are right! Setting __VUE_OPTIONS_API__ to true fixed the problem. No more warnings and kinesis works as expected.

Thanks!

Aminerman commented 3 years ago

Perfect :) That's a good news.