"TypeError: Cannot read property 'on' of undefined"

I made a very simple project where I wanted to test vue-konva I get the following:

Error in mounted hook: "TypeError: Cannot read property 'on' of undefined"

My component has a very simple template:

<template>
    <v-stage :config="configKonva">
        <v-layer>
            <v-circle :config="configCircle"></v-circle>
        </v-layer>
    </v-stage>
</template>

and data:

   data () {
      return {
        configKonva: {
          width: 200,
          height: 200,
        },
        configCircle: {
          x: 100,
          y: 100,
          radius: 70,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
        },
        icons: {},
      }
    },

the google chrome trace looks like that:

TypeError: Cannot read property 'on' of undefined
    at VueComponent.mounted (admin.js:84063)
    at callHook (admin.js:90305)
    at Object.insert (admin.js:91542)
    at invokeInsertHook (admin.js:93344)
    at Vue.patch [as __patch__] (admin.js:93563)
    at Vue._update (admin.js:90044)
    at Vue.updateComponent (admin.js:90172)
    at Watcher.get (admin.js:90526)
    at new Watcher (admin.js:90515)
    at mountComponent (admin.js:90179)

admin being the name of my app.

Any idea where does the problem comes from? It looks almost as some vue-konva components would not be correctly registered, but it that case, I would get a different error message from Vue.

I imported vue-konva with import and Vue.use(VueKonva)…

[jon-ht]

Hi,

I have an ElectronJS project and I also ran into this bug. To make it work, I had to add vue-konva to my whiteListedModules in webpack config file (webpack.renderer.config.js)

/**
 * List of node_modules to include in webpack bundle
 *
 * Required for specific packages like Vue UI libraries
 * that provide pure *.vue files that need compiling
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 */
let whiteListedModules = ['vue', 'vuetify', 'vue-konva'];

let rendererConfig = {
  devtool: '#cheap-module-eval-source-map',
  entry: {
    renderer: path.join(__dirname, '../src/renderer/main.js')
  },
  externals: [
    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
  ],
  ...
}

I hope it can help you too

[lvbirui]

i have the same problem like jon-ht ,but it dose not work…@jon-ht

@jon-ht 's solution is worked, i put the ‘vue-konva’ and restart my project (close the vscode and restart),and it works.