Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 3 support #123

Closed
ewen-lbh opened this issue Sep 22, 2020 · 43 comments · May be fixed by #185
Closed

Vue 3 support #123

ewen-lbh opened this issue Sep 22, 2020 · 43 comments · May be fixed by #185

Comments

@ewen-lbh
Copy link

Hi! Is Vue 3 support planned?

@tuannguyenminh2086
Copy link

I think you can use it now with composition api. that's no problem

@raphaelsoul
Copy link

vite throw this error, also no cmd styled entry file found in node_modules

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "konva" from "node_modules/vue-konva/umd/vue-konva.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
Error: [vite]: Rollup failed to resolve import "konva" from "node_modules/vue-konva/umd/vue-konva.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
    at Object.onwarn (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/vite/dist/node/build/index.js:70:19)
    at Object.onwarn (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:19393:20)
    at ModuleLoader.handleResolveId (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18268:26)
    at /Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18258:22
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18256:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18233:9)
    at async Promise.all (index 3) {

@Dylan-Chapman
Copy link

Adding to this - I get the error Uncaught TypeError: Cannot read property 'component' of undefined (from the line var Stage = (external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a.component('v-stage', {) when trying to use VueKonva both via createApp(App).use(VueKonva).mount("#app") and CDN with Vue 3.

@mazoqui
Copy link

mazoqui commented Oct 5, 2020

I get same error!

@lavrton
Copy link
Member

lavrton commented Oct 22, 2020

I am planning to support vue@3. For now, I am waiting for an official stable release.
If someone needs it sooner - feel free to make a fix and make a Pull Request.

@OEvgeny
Copy link

OEvgeny commented Oct 24, 2020

Hi @lavrton, thank you for the project!

Happy to tell that Vue v3.0.2 is officially released and should be pretty stable after 13 RCs and two minor releases

@cylazhm
Copy link

cylazhm commented Dec 1, 2020

Is vue@3 still not supported yet?

@lavrton
Copy link
Member

lavrton commented Dec 2, 2020

I do have plans for better v3 support. For now, I don't want to fix the current vue-konva architecture. I have plans for a major rewrite with function via custom renderer. It should work more efficiently.

@Botz Botz mentioned this issue Dec 23, 2020
@cristianvasquez
Copy link

I think you can use it now with composition api. that's no problem
hi @tuannguyenminh2086
Do you have any example of Konva using the composition API?

@ymebrugts
Copy link

ymebrugts commented Mar 24, 2021

Same error:
Uncaught TypeError: Cannot read property 'component' of undefined

I do have plans for better v3 support. For now, I don't want to fix the current vue-konva architecture. I have plans for a major rewrite with function via custom renderer. It should work more efficiently.

Why mention "better v3 support" when it literally has 0 support for Vue3? Unless I'm misunderstanding and there is a way to make it work with v3?

@lavrton
Copy link
Member

lavrton commented Mar 24, 2021

Well, according to my logic, anything that is not 0 is better.

@Amar-Gill
Copy link

Amar-Gill commented Mar 28, 2021

I'm using vue 3.0.5. I get this error when I write import VueKonva from 'vue-konva' in main.js:

Uncaught TypeError: external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a is undefined
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
vue-konva.js:304:42
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
    InnerModuleEvaluation self-hosted:2379
    InnerModuleEvaluation self-hosted:2379
    evaluation self-hosted:2330

@alew3
Copy link

alew3 commented Apr 11, 2021

I'm using vue 3.0.5. I get this error when I write import VueKonva from 'vue-konva' in main.js:

Uncaught TypeError: external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a is undefined
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
vue-konva.js:304:42
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
    InnerModuleEvaluation self-hosted:2379
    InnerModuleEvaluation self-hosted:2379
    evaluation self-hosted:2330

same here, I don't think it has vue3 support I guess.

@myoneflag
Copy link

Any luck V3 not supported vue-konva?
Got the same error.
image

@rtbo
Copy link

rtbo commented Jul 29, 2021

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

@piscis
Copy link

piscis commented Aug 20, 2021

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

its a fork from this repository and not official: vunamhung@2a9abd3 afaik. It provides a fork with the changes from this PR
https://github.com/konvajs/vue-konva/pull/133/files

@FaultErrorFailure92
Copy link

FaultErrorFailure92 commented Sep 10, 2021

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

How did you get it to work?

I tried to create a boot-file but I'm not lucky

import { boot } from 'quasar/wrappers'
import VueKonva from 'vue3-konva';

app.use(VueKonva);
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default ({ /* app, router, store */ }) => {
  return new Promise((resolve, reject) => {
    // do something

  })
}

@rtbo
Copy link

rtbo commented Sep 13, 2021

@FaultErrorFailure92 I wrote too soon. When I tested I saw a scene rendered and wrote the message.
May have been due to dev-server cache or whatever. Sorry for confusion.
I have switched my code to render dynamic SVG. This works very well with Vue and is more than enough for my need.

@dcruz1990
Copy link

dcruz1990 commented Oct 12, 2021

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

This works? im trying to setup in Vite but got the container error message.

@lavrton
Copy link
Member

lavrton commented Oct 12, 2021

It is not official. As I know, it is bases on this #133 PR. But it is far from finished. I wasn't able to pass several critical tests.

@lavrton
Copy link
Member

lavrton commented Oct 12, 2021

Personally, I love to adopt a good solution and help to make a good official version for Vue3. But currently I am not using Vue in any of my projects. So, I need someone who can take this Pull Request and finish it to make sure all tests are passes. All tests are critical. Without checking all of them, the library will be not production-ready.

I will be ready to polish everything from the Konva side and prepare the release.

@geoffgscott
Copy link
Contributor

geoffgscott commented Nov 5, 2021

A composition API based approach for Vue3 was merged. There are still two outstanding bugs that are causing test failures though:

  • Conditional layers (v-if/v-for) causes the Vue internals bug. This is a hard one to debug but only occurs with layers not with nested conditionals (v-if on a shape inside a layer).
  • Reactive event handlers. With the move to Vue 3.1 and up something there is a quirk with Vue-Konva reactivity where you can't add a listener dynamically if it was undefined to begin with. Weirdly null works so if you need to change the listener on a shape dynamically I recommend defining it as null or () => null and then reactivity should work as expected.

Any insight on either error would be super helpful.

If you want to test this passes:

  it('can update component events', async() => {
    const wrap = mount({
      template: `
        <v-stage :config="stage">
          <v-layer>
            <v-rect ref="rect" :config="{width: 300}" @click="click" />
          </v-layer>
        </v-stage>
      `,
      props: ['click'],
      data() {
        return {
          stage: {
            width: 300,
            height: 400,
          },
        };
      },
    }, { propsData: { click: null } }); // INITIALLY NULL

    const rect = wrap.vm.$refs.rect.getNode();
    expect(rect.eventListeners.click).to.equal(undefined);
    const handler = () => {};
    await wrap.setProps({ click: handler });
    expect(rect.eventListeners.click.length).to.equal(1);
    await wrap.setProps({ click: undefined });
    expect(rect.eventListeners.click).to.equal(undefined);
  });

But this fails:

  it('can update component events', async() => {
    const wrap = mount({
      template: `
        <v-stage :config="stage">
          <v-layer>
            <v-rect ref="rect" :config="{width: 300}" @click="click" />
          </v-layer>
        </v-stage>
      `,
      props: ['click'],
      data() {
        return {
          stage: {
            width: 300,
            height: 400,
          },
        };
      },
    }, { propsData: { click: undefined } }); // INITIALLY UNDEFINED

    const rect = wrap.vm.$refs.rect.getNode();
    expect(rect.eventListeners.click).to.equal(undefined);
    const handler = () => {};
    await wrap.setProps({ click: handler });
    expect(rect.eventListeners.click.length).to.equal(1);
    await wrap.setProps({ click: undefined });
    expect(rect.eventListeners.click).to.equal(undefined);
  });

@lavrton
Copy link
Member

lavrton commented Nov 5, 2021

Thanks for the updates from @geoffgscott in #172 I just released [email protected]. It should support vue@3. I don't think it will work with vue@2.

I didn't deeply test it by myself yet. Please try it.
Demo: https://codesandbox.io/s/vue-konva-with-vue-3-88o9o

@boboldehampsink
Copy link

Thanks @lavrton, tested it and found a little issue: #172 (comment)

@lavrton
Copy link
Member

lavrton commented Dec 21, 2021

@boboldehampsink can you make a reproducible example? My codesandbox above work on.

@boboldehampsink
Copy link

@lavrton when I remove ref="layer" from v-layer in your example I see the error:

Screen Shot 2021-12-22 at 08 05 41

@boboldehampsink
Copy link

@lavrton any chance of fixing this? We can't use konva for vue 3 because of this.

@lavrton
Copy link
Member

lavrton commented Jan 12, 2022

I am not certain how to reproduce it. I saw this issue once when I tried to remove ref="layer" from my example above. But it was gone when I reload, so I guess it was related to hot reload.

@boboldehampsink
Copy link

@lavrton I think vue-konva should just allow the use of <template> tags, as they do not render html anyway. It would fix this issue.

@boboldehampsink
Copy link

@lavrton I provided a fix in #185

@lavrton
Copy link
Member

lavrton commented Mar 21, 2022

There are two issues are still there with vue-konva for vue@3.

Two tests in index.test.js

  1. no DOM events
  2. checking for loop order in layers

Issue in the test number 1 is critical. It will be perfect if someone can take a look into it. I was unable to find a solution.
The root of the issue that is <v-stage /> component is attaching all passed event listeners into DOM <div /> container. But we don't need that. We need to attached them only to Konva.Stage instance.

Version 3 for Vue is already the default version. I want to polish vue-konva for it ASAP. Any help is very welcome!

@DavidVaness
Copy link

DavidVaness commented Mar 30, 2022

@lavrton Our team needs Vue 3 support and would be willing to invest some time to make it work. If you could provide details on what is left todo, we would set aside some time to help out

@lavrton
Copy link
Member

lavrton commented Mar 30, 2022

@DavidVaness vue-konva@3 with vue@3 support is already published. Try it. How does it work for you?

From my experience, it mostly works. But stage events are not working correctly. They double trigger for native DOM event. As a workaround, it is possible to filter them inside event callback.

@DavidVaness
Copy link

Great, we will try it and provide feedback. If you need help, let me know

@ghost
Copy link

ghost commented May 3, 2022

Hello,

I am using vue-konva (3.0.0) with Vue (3.2.33) and Vite (2.9.7).

It works well in development mode (using vite command), but in production (after vite build) the css of my application is completely broken. I have no error in the browser console, nor during the build process.

The import of vue-konva in the main.ts file generates the problem, even if I don't use the konva plugin in my app (even if I don't call app.use(VueKonva)).

Do you have some advices or vite specific configurations in order to avoid the problem ?
Or is it preferable to compile my application using vue-konva with webpack and vue-cli ?

@lavrton
Copy link
Member

lavrton commented May 3, 2022

@p-clerc make a minimal repository to reproduce the issue.

@ghost
Copy link

ghost commented May 4, 2022

@p-clerc make a minimal repository to reproduce the issue.

I finally found what was the problem when i was trying to make a minimal project :-)

In one of my tsconfig references I was extending "extends": "@vue/tsconfig/tsconfig.web.json"and this caused the problem at build. Honestly this configuration was automatically done when I have created my project with vite some time ago.

It seems that creating a Vue project with vite today, doesn't require this library and configuration.

Thanks

@ghost
Copy link

ghost commented May 6, 2022

Hello @lavrton

In fact my problem is more complex, I resolved the problem on my computer but in a docker container it still appears.
I do not master well vite and esbuild, but it seems that the build environment has a effect on the CSS result.

Here is a little repo with which you can reproduce the problem. As said removing the usage of vue-konva solve the issue but it could come from vite or esbuild.

https://github.com/p-clerc/vue3-template

Thanks for you help

@lavrton
Copy link
Member

lavrton commented May 6, 2022

I am not sure what I can do from vue-konva side. The repo works ok for me locally (without docker). And I don't want to fight with docker.

@ghost
Copy link

ghost commented May 9, 2022

I am not sure what I can do from vue-konva side. The repo works ok for me locally (without docker). And I don't want to fight with docker.

Thank you @lavrton for your time, in fact I have found another workaround with Vuetify theme customization. I think my problem was not related to konvas but permits to shown the Vuetify bug. As I use aplha/beta versions of Vuetify and there releated vite plugins, this kind of bug could appear.

@daitenshiren
Copy link

daitenshiren commented Oct 17, 2022

Good day, @lavrton I'm having this weird issue with shapes moving up or down the array. i'm using vue 3 it was originally written in composition api but I thought that was what causing the bug so i made a small demo using option api but still getting the error.
to elaborate the vue array is updated but the layer.node is not. as seen in the console.log.
I'm wondering if you can take a look at it. I have created a small demo. https://codesandbox.io/s/crazy-maria-l6rd11?file=/src/App.vue

@lavrton
Copy link
Member

lavrton commented Oct 17, 2022

@daitenshiren I think the issue with your code is that you don't use keys correctly.
I changed it a bit into:

<v-group v-for="(item, i) in stage.elements" :key="item.config.id">

Looks like it works ok now: https://codesandbox.io/s/wizardly-resonance-yckfhe

@daitenshiren
Copy link

@daitenshiren I think the issue with your code is that you don't use keys correctly. I changed it a bit into:

<v-group v-for="(item, i) in stage.elements" :key="item.config.id">

Looks like it works ok now: https://codesandbox.io/s/wizardly-resonance-yckfhe

Thank you. I'm so stupid not noticing that. Awesome. I have been stuck with that issue for days.

@lavrton lavrton closed this as completed Aug 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.