TypeError: container.value is null in Nuxt3

[zupaazhai]

I have installed Konva and Vue Konva in my project.

I used Konva version 8.4.3 vue-konva version 3.0.2

then when use in page,

<template>
  <v-stage :config="{ width: 200, height: 200 }">
    <v-layer>
      <v-circle :config="{ x: 100, y: 100, radius: 70, fill: "red", stroke: "black", strokeWidth: 4 }"></v-circle>
    </v-layer>
  </v-stage>
</template>

and run in Firefox I got error

Uncaught (in promise) TypeError: container.value is null

this is how I setup in my project

1. create plugin vue-konva.js

   
   import VueKonva from 'vue-konva'

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueKonva); })

2. in nuxt.config.ts
```js
plugins: [
        ...
        { src: '~/plugins/vue-konva', mode: 'client' },
]

anyone can suggest me?

[efren-corillo]

having the same issue. Did you find a solution @zupaazhai ?

 Uncaught (in promise) TypeError: container.value is null
    setup vue-konva.js:377
    node_modules vue-konva.js:28421
    callWithErrorHandling runtime-core.cjs.js:192
    callWithAsyncErrorHandling runtime-core.cjs.js:199
    node_modules vue-konva.js:28403
    flushPostFlushCbs runtime-core.esm-bundler.js:367
    flushJobs runtime-core.esm-bundler.js:405
    promise callback*queueFlush runtime-core.esm-bundler.js:308
    queueJob runtime-core.esm-bundler.js:302
    effect runtime-core.esm-bundler.js:6136
    resetScheduling reactivity.esm-bundler.js:264
    triggerEffects reactivity.esm-bundler.js:308
    triggerRefValue reactivity.esm-bundler.js:1070
    set value reactivity.esm-bundler.js:1115
    updateStageSize index.vue:134
    setup index.vue:281

[wizbit]

I managed it by putting the stage in <client-only> tags

e.g.

<template>
  <client-only>
    <v-stage :config="{ width: 200, height: 200 }">
      <v-layer>
        <v-circle :config="{ x: 100, y: 100, radius: 70, fill: "red", stroke: "black", strokeWidth: 4 }"></v-circle>
      </v-layer>
    </v-stage>
  </client-only>
</template>

[kkparkclouflake]

I'm using Quasar Framework with vue-konva, and occur same error. I made an build file from latest commit, and change main source file from 'vue-konva.umd.js' into 'vue-konva.mjs' and it works.

You can try it; ( https://github.com/kkparkclouflake/vue-konva/tree/nightly ) yarn add https://github.com/kkparkclouflake/vue-konva#nightly or npm i --save git+https://github.com/kkparkclouflake/vue-konva#nightly

[joeelia]

1. Delete node_modules folder
2. yarn add -D @rollup/plugin-commonjs
3. Add this config to nuxt.config.js

   import commonjs from '@rollup/plugin-commonjs';
   export default defineNuxtConfig({
   ...,
   vite: {
   plugins: [
     commonjs() // Adding the CommonJS plugin to Vite's configuration
   ]
   },
   plugins: [
   { src: '~/plugins/vue-konva.js', mode: 'client' },
   ]
   })

4. Use this code in a new plugin file called vue-konva.js

   
   import VueKonva from 'vue-konva';

let konvaModule;

const loadKonva = async () => { if (!konvaModule) { konvaModule = await import('konva'); } return konvaModule; };

export default defineNuxtPlugin(nuxtApp => { konvaModule = loadKonva(); nuxtApp.vueApp.use(VueKonva, { Konva: konvaModule }); });

5. run `yarn` again
6. test app
7. React with emoji if this worked for you

[boriswinner]

I'm using Quasar Framework with vue-konva, and occur same error. I made an build file from latest commit, and change main source file from 'vue-konva.umd.js' into 'vue-konva.mjs' and it works.

You can try it; ( https://github.com/kkparkclouflake/vue-konva/tree/nightly ) yarn add https://github.com/kkparkclouflake/vue-konva#nightly or npm i --save git+https://github.com/kkparkclouflake/vue-konva#nightly

Thank you so much! Your fix helped me. I tried to use Quasar + Vue 3 + Vue Konva and got the same error. I hope this issue gets resolved in the hew release.