I can't used in nuxt3

[mei860821]

When I comment out import VueKonva from 'vue-konva' in /plugins/vuekonva.js it works
But I comment in , it doesn't work

terminal log

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/rosie/Documents/rosie/nuxt3-app/node_modules/konva/lib/index-node.js from /Users/rosie/Documents/rosie/nuxt3-app/node_modules/vue-konva/umd/vue-konva.js not supported.
Instead change the require of index-node.js in /Users/rosie/Documents/rosie/nuxt3-app/node_modules/vue-konva/umd/vue-konva.js to a dynamic import() which is available in all CommonJS modules.
    at webpackUniversalModuleDefinition (/Users/rosie/Documents/rosie/nuxt3-app/node_modules/vue-konva/umd/vue-konva.js:7:44)
    at Object.<anonymous> (/Users/rosie/Documents/rosie/nuxt3-app/node_modules/vue-konva/umd/vue-konva.js:14:3)
    at async Promise.all (index 0)
    at async __instantiateModule__ (file:///Users/rosie/Documents/rosie/nuxt3-app/.nuxt/dist/server/server.mjs:2607:3) {
  code: 'ERR_REQUIRE_ESM'
}
[vite dev] Error loading external "/Users/rosie/Documents/rosie/nuxt3-app/node_modules/vue-konva/umd/vue-konva.js".
  at file://./.nuxt/dist/server/server.mjs:2248:291  
  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:2607:3)

I tried #9 and stack overflow
but it also fail

package.json

 "devDependencies": {
    "nuxt3": "latest"
  },
  "dependencies": {
    "konva": "^8.3.2",
    "vue-konva": "^2.1.7"
  }

nuxt.config.js

export default defineNuxtConfig({
    // plugins: ["~/plugins/vue-konva"],
    plugins: [
        { src: "~/plugins/vuekonva", mode: 'client' }
    ],
    build: {
        transpile: ['konva']
    },
})

/plugins/vuekonva.js

import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

can anyone help ? thank

[mei860821]

I'm tried to run in nuxt2 that will be success.
and I have update vue-konva@3.0.0-0 in nuxt3 , it can't support too.

[Thy3634]

me too.

[annymosse]

Failed to make it work with nuxt2+composition-api and nuxt3 whenever it work well with nuxt2 without composition-api
this is the log for nuxt2+composition-api

ypeError: Object(...) is not a function
    at setup (vue-konva.js?3c47:339:1)
    at mergedSetupFn (vue-composition-api.mjs?4d85:2157:1)
    at eval (vue-composition-api.mjs?4d85:1969:1)
    at activateCurrentInstance (vue-composition-api.mjs?4d85:1888:1)
    at initSetup (vue-composition-api.mjs?4d85:1967:1)
    at VueComponent.wrappedData (vue-composition-api.mjs?4d85:1950:1)
    at getData (vue.common.dev.js?b115:4754:1)
    at initData (vue.common.dev.js?b115:4711:1)
    at initState (vue.common.dev.js?b115:4650:1)
    at VueComponent.Vue._init (vue.common.dev.js?b115:5010:1)

[DavidVaness]

guys I can confirm vue-konva (2.1.7) works with nuxt2 and nuxt-composition api.. So this is not on konva.
Haven't checked the new release yet

[vanling]

@DavidVaness this is an issue with nuxt3 not nuxt2 right?
nuxt3 is way more sensitive when it comes to SSR and the way VUE3 is loaded.

[DavidVaness]

@DavidVaness this is an issue with nuxt3 not nuxt2 right?
nuxt3 is way more sensitive when it comes to SSR and the way VUE3 is loaded.

Since Vue 3 doesnt work 100% with konva yet(eg. stage events), I would assume this is the case. But I havn't tried it yet

[vanling]

This might be related nuxt/nuxt#13632

[hayreenfly]

This is how I implemented it in Nuxt3. I created a plugin

// plugin/vue-konva.ts

import VueKonva from 'vue-konva'
import Konva from 'konva'

export default defineNuxtPlugin((ctx) => {
  ctx.vueApp.use(VueKonva, { Konva })
})

// nuxt.config.ts

plugins: [{ src: '~/plugins/vue-konva.ts', mode: 'client' }]

build: {transpile: ['vue-conva']}

[vietanhbui]

Try this:
plugins/konva.ts
import VueKonva from 'vue-konva'; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueKonva) })