Vue Dev Tools - Cannot convert undefined or null to object

Issue: Getting the following errors when using Vue Dev Tools: Reproduce: Install vue dev plugin in either Firefox or Chrome

vue create baklava-test
cd baklava-test
npm install baklavajs

make project look like below. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BaklavaVuePlugin } from '@baklavajs/plugin-renderer-vue'
import '@baklavajs/plugin-renderer-vue/dist/styles.css'

Vue.config.productionTip = false

Vue.use(BaklavaVuePlugin)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

views/Home.vue

<template>
    <div class="home">
        <div style="height: 865px">
            <baklava-editor :plugin="viewPlugin" />
        </div>
    </div>
</template>

<script>
import { Editor, NodeBuilder } from '@baklavajs/core'
import { ViewPlugin } from '@baklavajs/plugin-renderer-vue'
import { OptionPlugin } from '@baklavajs/plugin-options-vue'

export default {
  name: 'Home',
  data () {
    return {
      editor: new Editor(),
      viewPlugin: new ViewPlugin()
    }
  },
  created () {
    this.editor.use(this.viewPlugin)
    this.editor.use(new OptionPlugin())
    this.viewPlugin.enableMinimap = true
    const math = new NodeBuilder('MathNode')
      .setName('Math')
      .addInputInterface('Number 1', 'NumberOption', 1)
      .addInputInterface('Number 2', 'NumberOption', 10)
      .addOption('Operation', 'SelectOption', 'Add', undefined, {
        items: ['Add', 'Subtract']
      })
      .addOutputInterface('Output')
      .onCalculate((n) => {
        const n1 = n.getInterface('Number 1').value
        const n2 = n.getInterface('Number 2').value
        const operation = n.getOptionValue('Operation')
        let result
        if (operation === 'Add') {
          result = n1 + n2
        } else if (operation === 'Subtract') {
          result = n1 - n2
        }
        n.getInterface('Output').value = result
      })
      .build()
    this.editor.registerNodeType('Math Node', math)
  }
}
</script>

npm run serve

Now open up the console, go to http://localhost:8080 add a node and try to move it. Specs: @vue/cli 4.5.10 osx 10.14.6 latest Chrome and Firefox with latest vue dev plugin

[newcat]

Unfortunately I am unable to find the culprit at the moment. For some reason, the class component is not properly converted to a normal Vue object, or at least not in time. The properties are directly on the component instance, but they should also be on the _data property. That is not the case and _data is undefined which causes this error. But I have no clue why the conversion isn’t working in the first place. Also rolling back to the old versions of vue-property-decorator didn’t fix the problem.

I haven’t surrendered yet but this problem is a tough nut to crack 😉

[newcat]

Thanks GitHub for auto-closing 😄 Anyway, after trying more version-combinations, I seem to have found one that works. Can you verify that the problems are gone with v1.8.5, please?