Vue Dev Tools - Cannot convert undefined or null to object

[code-is-art]

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

[code-is-art]

BTW I can't seem to downgrade as all versions reference 1.8.2. Even if I do

npm install --save --save-exact baklavajs@1.7.6

I still get 1.8.2 installed

[code-is-art]

I don't know why but 1.8.1 doesn't exhibit this issue at least in the playground. I am not sure how to revert to 1.8.1 in my project as I am not used to lerna or a monorepo situation. I have gotten as far as building the packages and running the playground as detailed here but I don't know what to do next to add the 1.8.1 full build to my project. Whenever I try to --save-exact baklavajs@1.8.1 I still get 1.8.2. Help from anyone would be welcomed.

[newcat]

About the Vue devtools issue: I was able to reproduce it. I think it has something to do with this commit. However, I wasn't able to pinpoint exactly which of the deps is causing the issue. First I was thinking it was vue-property-decorator, but after testing it doesn't look like it caused it. So I need a bit of time to find the culprit.

---

Whenever I try to --save-exact baklavajs@1.8.1 I still get 1.8.2

Yes because I didn't think about it when adding ^ to the versions in the package.json 🤦‍♂️ For now you can install the packages separately:

npm install --save --save-exact @baklavajs/core@1.8.1 @baklavajs/plugin-renderer-vue@1.8.1 @baklavajs/plugin-options-vue@1.8.1

(if you need you can also install @baklavajs/plugin-interface-types@1.8.1 and @baklavajs/plugin-engine@1.8.1)

[code-is-art]

thanks. I narrowed it down to the

this.$emit('select', this);

call in Node.vue but couldn't figure out how to fix it. When I comment it out the problem goes away though. Spent the better part of the day trying to figure it out but I am not so familiar with the project yet.

[code-is-art]

I get these warnings

No matching version found for @baklavajs/core@1.8.1

etc... for all the packages

[code-is-art]

I was able to do 1.8.0 without problems

[dunkfordyce]

I also have this issue. Has it been fixed?

[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?