Not working in new project

rustq / vue-skia

Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. 基于 Skia 的 2D 图形 Vue 渲染库 —— 使用 Rust 语言实现纯软件光栅化

https://vue-skia.netlify.app

MIT License

293 stars 12 forks source link

Not working in new project #26

Closed megaarmos closed 8 months ago

megaarmos commented 8 months ago

Fresh new installation of vue project. Tried with vite-plugin-wasm plugin, but it did't help.

vue-skia.js?v=3670762b:68 Uncaught TypeError: Cannot read properties of undefined (reading 'SoftSkiaWASM')
    at setup (vue-skia.js?v=3670762b:68:26)
    at callWithErrorHandling (chunk-KRJR3MWC.js?v=3670762b:1634:18)
    at setupStatefulComponent (chunk-KRJR3MWC.js?v=3670762b:9028:25)
    at setupComponent (chunk-KRJR3MWC.js?v=3670762b:8989:36)
    at mountComponent (chunk-KRJR3MWC.js?v=3670762b:7319:7)
    at processComponent (chunk-KRJR3MWC.js?v=3670762b:7285:9)
    at patch (chunk-KRJR3MWC.js?v=3670762b:6751:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-KRJR3MWC.js?v=3670762b:7429:11)
    at ReactiveEffect.run (chunk-KRJR3MWC.js?v=3670762b:421:19)
    at instance.update (chunk-KRJR3MWC.js?v=3670762b:7553:17)
setup @ vue-skia.js?v=3670762b:68
callWithErrorHandling @ chunk-KRJR3MWC.js?v=3670762b:1634
setupStatefulComponent @ chunk-KRJR3MWC.js?v=3670762b:9028
setupComponent @ chunk-KRJR3MWC.js?v=3670762b:8989
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7319
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
render2 @ chunk-KRJR3MWC.js?v=3670762b:8074
mount @ chunk-KRJR3MWC.js?v=3670762b:5350
app.mount @ chunk-KRJR3MWC.js?v=3670762b:11022
(anonymous) @ main.ts:7

meloalright commented 8 months ago

Fresh new installation of vue project. Tried with vite-plugin-wasm plugin, but it did't help.

vue-skia.js?v=3670762b:68 Uncaught TypeError: Cannot read properties of undefined (reading 'SoftSkiaWASM')
    at setup (vue-skia.js?v=3670762b:68:26)
    at callWithErrorHandling (chunk-KRJR3MWC.js?v=3670762b:1634:18)
    at setupStatefulComponent (chunk-KRJR3MWC.js?v=3670762b:9028:25)
    at setupComponent (chunk-KRJR3MWC.js?v=3670762b:8989:36)
    at mountComponent (chunk-KRJR3MWC.js?v=3670762b:7319:7)
    at processComponent (chunk-KRJR3MWC.js?v=3670762b:7285:9)
    at patch (chunk-KRJR3MWC.js?v=3670762b:6751:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-KRJR3MWC.js?v=3670762b:7429:11)
    at ReactiveEffect.run (chunk-KRJR3MWC.js?v=3670762b:421:19)
    at instance.update (chunk-KRJR3MWC.js?v=3670762b:7553:17)
setup @ vue-skia.js?v=3670762b:68
callWithErrorHandling @ chunk-KRJR3MWC.js?v=3670762b:1634
setupStatefulComponent @ chunk-KRJR3MWC.js?v=3670762b:9028
setupComponent @ chunk-KRJR3MWC.js?v=3670762b:8989
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7319
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
render2 @ chunk-KRJR3MWC.js?v=3670762b:8074
mount @ chunk-KRJR3MWC.js?v=3670762b:5350
app.mount @ chunk-KRJR3MWC.js?v=3670762b:11022
(anonymous) @ main.ts:7

Oh that is weird em..... I think maybe the dependence package soft-skia-wasm havent be automatically installed in node_modules

meloalright commented 8 months ago

Fresh new installation of vue project. Tried with vite-plugin-wasm plugin, but it did't help.

vue-skia.js?v=3670762b:68 Uncaught TypeError: Cannot read properties of undefined (reading 'SoftSkiaWASM')
    at setup (vue-skia.js?v=3670762b:68:26)
    at callWithErrorHandling (chunk-KRJR3MWC.js?v=3670762b:1634:18)
    at setupStatefulComponent (chunk-KRJR3MWC.js?v=3670762b:9028:25)
    at setupComponent (chunk-KRJR3MWC.js?v=3670762b:8989:36)
    at mountComponent (chunk-KRJR3MWC.js?v=3670762b:7319:7)
    at processComponent (chunk-KRJR3MWC.js?v=3670762b:7285:9)
    at patch (chunk-KRJR3MWC.js?v=3670762b:6751:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-KRJR3MWC.js?v=3670762b:7429:11)
    at ReactiveEffect.run (chunk-KRJR3MWC.js?v=3670762b:421:19)
    at instance.update (chunk-KRJR3MWC.js?v=3670762b:7553:17)
setup @ vue-skia.js?v=3670762b:68
callWithErrorHandling @ chunk-KRJR3MWC.js?v=3670762b:1634
setupStatefulComponent @ chunk-KRJR3MWC.js?v=3670762b:9028
setupComponent @ chunk-KRJR3MWC.js?v=3670762b:8989
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7319
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
render2 @ chunk-KRJR3MWC.js?v=3670762b:8074
mount @ chunk-KRJR3MWC.js?v=3670762b:5350
app.mount @ chunk-KRJR3MWC.js?v=3670762b:11022
(anonymous) @ main.ts:7

Oh that is weird em..... I think maybe the dependence package soft-skia-wasm havent be automatically installed in node_modules

can u ls node_modules/soft-skia-wasm to make sure it exist?

megaarmos commented 8 months ago

Fresh new installation of vue project. Tried with vite-plugin-wasm plugin, but it did't help.

vue-skia.js?v=3670762b:68 Uncaught TypeError: Cannot read properties of undefined (reading 'SoftSkiaWASM')
    at setup (vue-skia.js?v=3670762b:68:26)
    at callWithErrorHandling (chunk-KRJR3MWC.js?v=3670762b:1634:18)
    at setupStatefulComponent (chunk-KRJR3MWC.js?v=3670762b:9028:25)
    at setupComponent (chunk-KRJR3MWC.js?v=3670762b:8989:36)
    at mountComponent (chunk-KRJR3MWC.js?v=3670762b:7319:7)
    at processComponent (chunk-KRJR3MWC.js?v=3670762b:7285:9)
    at patch (chunk-KRJR3MWC.js?v=3670762b:6751:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-KRJR3MWC.js?v=3670762b:7429:11)
    at ReactiveEffect.run (chunk-KRJR3MWC.js?v=3670762b:421:19)
    at instance.update (chunk-KRJR3MWC.js?v=3670762b:7553:17)
setup @ vue-skia.js?v=3670762b:68
callWithErrorHandling @ chunk-KRJR3MWC.js?v=3670762b:1634
setupStatefulComponent @ chunk-KRJR3MWC.js?v=3670762b:9028
setupComponent @ chunk-KRJR3MWC.js?v=3670762b:8989
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7319
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
componentUpdateFn @ chunk-KRJR3MWC.js?v=3670762b:7429
run @ chunk-KRJR3MWC.js?v=3670762b:421
instance.update @ chunk-KRJR3MWC.js?v=3670762b:7553
setupRenderEffect @ chunk-KRJR3MWC.js?v=3670762b:7563
mountComponent @ chunk-KRJR3MWC.js?v=3670762b:7331
processComponent @ chunk-KRJR3MWC.js?v=3670762b:7285
patch @ chunk-KRJR3MWC.js?v=3670762b:6751
render2 @ chunk-KRJR3MWC.js?v=3670762b:8074
mount @ chunk-KRJR3MWC.js?v=3670762b:5350
app.mount @ chunk-KRJR3MWC.js?v=3670762b:11022
(anonymous) @ main.ts:7

Oh that is weird em..... I think maybe the dependence package soft-skia-wasm havent be automatically installed in node_modules

can u ls node_modules/soft-skia-wasm to make sure it exist?

It was my initial tought, but no, I do have the dependence package soft-skia-wasm.

megaarmos commented 8 months ago

Damn it i just got it working, so the problem in my case was that i placed the code in App.vue. And this code

<template v-if="!loading">
  <v-surface :width="360" :height="360">
    ...
  </v-surface>
</template>

is not working because i guess it is top level template, hence the v-if not working (my conclusion)

<template>
  <div v-if="!loading">
    <v-surface :width="360" :height="360">
      ...
    </v-surface>
  </div>
</template>

My little suggestion would be to change it in your example, so that people like me don't struggle in future 😁

meloalright commented 8 months ago

🤔 Okay I will try to reproduce and fix it

meloalright commented 8 months ago

Damn it i just got it working, so the problem in my case was that i placed the code in App.vue. And this code
<template v-if="!loading">
  <v-surface :width="360" :height="360">
    ...
  </v-surface>
</template>
is not working because i guess it is top level template, hence the v-if not working (my conclusion)
<template>
  <div v-if="!loading">
    <v-surface :width="360" :height="360">
      ...
    </v-surface>
  </div>
</template>
My little suggestion would be to change it in your example, so that people like me don't struggle in future 😁

Ohhhh yeah, v-if should work in template tag but not in top template tag

https://vuejs.org/guide/essentials/conditional.html#v-if-on-template

meloalright commented 8 months ago

Damn it i just got it working, so the problem in my case was that i placed the code in App.vue. And this code
<template v-if="!loading">
  <v-surface :width="360" :height="360">
    ...
  </v-surface>
</template>
is not working because i guess it is top level template, hence the v-if not working (my conclusion)
<template>
  <div v-if="!loading">
    <v-surface :width="360" :height="360">
      ...
    </v-surface>
  </div>
</template>
My little suggestion would be to change it in your example, so that people like me don't struggle in future 😁
Ohhhh yeah, v-if should work in template tag but not in top template tag

https://vuejs.org/guide/essentials/conditional.html#v-if-on-template

Thanks

Now README updated https://github.com/rustq/vue-skia/pull/28

meloalright commented 8 months ago

Damn it i just got it working, so the problem in my case was that i placed the code in App.vue. And this code
<template v-if="!loading">
  <v-surface :width="360" :height="360">
    ...
  </v-surface>
</template>
is not working because i guess it is top level template, hence the v-if not working (my conclusion)
<template>
  <div v-if="!loading">
    <v-surface :width="360" :height="360">
      ...
    </v-surface>
  </div>
</template>
My little suggestion would be to change it in your example, so that people like me don't struggle in future 😁
Ohhhh yeah, v-if should work in template tag but not in top template tag https://vuejs.org/guide/essentials/conditional.html#v-if-on-template
Thanks

Now README updated #28

That is better doc

https://github.com/rustq/vue-skia/blob/a36db2f6d602a15c5891f283d1177c694f381c57/README.md?plain=1#L33-L59