staskobzar / vue-audio-visual

VueJS audio visualization components
MIT License
717 stars 112 forks source link

[Vue warn]: Invalid VNode type: Symbol(v-fgt) (symbol) #158

Open imransilvake opened 4 months ago

imransilvake commented 4 months ago

I upgraded the package to the latest version from "2.4.1" and I am getting the following error:

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid VNode type: Symbol(v-fgt) (symbol) 
  at <AVWaveform src="http://foo.com/music.ogg" > 
  at <As> 
  at <MessagingMainCompose content= {html: '', str: ''} onOnEmitUpdateContent=fn > 
  at <MessagingMain key=1 > 
  at <MessagingContent onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouterView key="/messaging/008-demo" > 
  at <MessagingContentWrapper> 
  at <AppMessaging onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouterView> 
  at <PrivateLayout key=1 > 
  at <App>

I followed the install instructions but that didn't fix it.

Any way to fix it?

staskobzar commented 4 months ago

Hello @imransilvake this is version has only github security fix PR merged. Try to reinstall packages or remove node_modules and run install again. If it does not help then rollback to the version 2 that was working for you before. Version 2 is outdated and it is suggested to update to ver 3.

imransilvake commented 4 months ago

@staskobzar The error I got from above is from the latest version. I want to use that to fix security issues on the gitlab. I removed node_modules and installed the package again but still getting above error.

staskobzar commented 4 months ago

@imransilvake what vue version do you have?

imransilvake commented 4 months ago

@staskobzar I am using Vue with CLI: "vue": "^3.2.47"

staskobzar commented 4 months ago

Just tried with vue cli to create a project and setup the plugin. All works fine. In you error log plugin is using example src url that does not exists: image

Did you forget to provide a real audio file path? Can you recreate it with a simple vue cli project and give me a source example?

imransilvake commented 2 months ago

Hey, sorry for late reply. I was able to make it work. I have found another issue with the cors-anonym prop. It doesn't work with av-line.

                                                       <av-line
                            cors-anonym
                            :audio-controls="false"
                            :line-width="2"
                            line-color="#6656ff"
                            :canv-height="20"
                            :canv-width="132" />
staskobzar commented 2 months ago

Hello @imransilvake cors-anonym is the part of the base mixin that is used by all the plugins, not only by av-line. Did you try to provide a value to the prop?

<av-line
   :cors-anonym="true"
/>
imransilvake commented 2 months ago

yes I tried that as well but it didn't work.

staskobzar commented 2 months ago

you do not have audio-src attribute in your example. Are you sure you have it in your real code?