ReferenceError: h is not defined

[v1r0x]

Hey, I think about switching from AngularJS to Vue, but need a plugin to display tree-like hierarchy with drag&drop and easy customization. Seems like bosket is the only solution. So thanks for that! :)

But the customization is what gives me headache. I built a sample app using laravel-mix bundled with Vue. After fixing the webpack/babel setup to be able to use

display: (item, inputs) =>
    <strong>{ item.label }</strong>,

in my component, which should also display the tree. But since this is now fixed, I get the ReferenceError.
Full message:

 [Vue warn]: Error in render: "ReferenceError: h is not defined"

found in

---> <TreeViewNode>
       <WithTransitionTreeViewNode>
         <TreeView>
           <WithLabelsTreeView>
             <WithListenerWithLabelsTreeView>
               <WithListenerWithListenerWithLabelsTreeView>
                 <ExampleComponent> at resources/assets/js/components/ExampleComponent.vue
                   <Root>

When I switch back to a simple display function (e.g. display: function(item) { return item.label; }) it works.

Is this a problem with bosket or still an error with my setup?

My added .babelrc (without it html was not allowed in display())

{
    "presets": [
        [ "env", { "modules": false } ]
    ],
    "plugins": [
        "transform-vue-jsx",
        "transform-object-rest-spread",
        "transform-class-properties",
    ]
}

app.js

import { TreeView } from '@bosket/vue';
import ExampleComponent from './components/ExampleComponent.vue';

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', ExampleComponent);
Vue.component('tree-view', TreeView);

const app = new Vue({
    el: '#app'
});

[elbywan]

Hey @v1r0x, thanks for trying Bosket 😉 !

Error in render: "ReferenceError: h is not defined"
Is this a problem with bosket or still an error with my setup?

The setup looks fine, but I think that it might be a code issue.

From the vue docs :

So in order to use jsx in the bosket display() method you first need to have the h function injected by the babel plugin somewhere in the scope.

Could you check out if you use the right object method syntax ? (especially the method in your component where you define the displayfunction)

Hope it will help !

[v1r0x]

Thanks for your answer. I tried to fix it the last couple of days, but still no luck...😞

I started from scratch, imported the bosket libs and replaced my component with the one from the example (in your link), so my app.js looks like this:

import { TreeView } from "@bosket/vue"

require('./bootstrap');

window.Vue = require('vue');

Vue.component('jsx-example', {
  render () { // h will be injected
    return <div id="foo">bar</div>
  },
  myMethod: function () { // h will not be injected
    return <div id="foo">bar</div>
  },
  someOtherMethod: () => { // h will not be injected
    return <div id="foo">bar</div>
  }
})
Vue.component('tree-view', TreeView);

const app = new Vue({
    el: '#app'
});

But I still get the same error

ERROR in ./resources/assets/js/app.js
Module build failed: SyntaxError: Unexpected token (22:11)

  20 | Vue.component('jsx-example', {
  21 |   render () { // h will be injected
> 22 |     return <div id="foo">bar</div>
     |            ^
  23 |   },
  24 |   myMethod: function () { // h will not be injected
  25 |     return <div id="foo">bar</div>

This looks more like a Vue/laravel-mix error, but I have absolutely no idea why this doesn't work ootb...

Edit: Ok, seems I mixed up jsx and ES2015 🤦
Added back a .babelrc (and deps) and I'm back at my initial error

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

Edit2: That setup lead to another error...(vuejs/babel-plugin-transform-vue-jsx#65). I removed the "plugins" property from my .babelrc and I could render everything just fine. Even jsx. But if I add back a custom display function in my Component, I get the initial error again...
Here's my component (of course it has to be .vue instead of .txt 😉 ):
ExampleComponent.txt

[elbywan]

@v1r0x
I had a look at your .vue component, could you try to change some parts like I did below ?
I didn't test the code but I have the feeling that it might help 😉 .

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        // methods is an object, h is not injected.
        methods: {
            onSelect(newSelection) {
                this.selection = newSelection
            }
        },
        // h gets auto injected here (note that data is now a member function)
        data() {
            return {
                selection: [],
                model: [
                    { label: "One" },
                    { label: "Two" },
                    { label: "Three", list: [
                        { label: "Four" },
                        { label: "Five" }
                    ] }
                ],
                category: "list",
                // Move 'display' here
                display: item => <strong>item.label</strong>
            }
        }
    }
</script>

[v1r0x]

I love you! 😁 It works!
Appreciate your help, not always that nice people here on github. Keep it up! 👍

[elbywan]

Thanks a bunch 😄 !