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

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.

[lavrton]

Closing this. vue-konva designed browser DOM, not SSR. So dynamic or client-only config is required.