rete: Cannot read property 'style' of null

I’m using vue cli 3 to generate the project.

Then my component:

<template>
  <div id="rete" class="node-editor"></div>
</template>

<script>
import Rete from 'rete';
// import ConnectionPlugin from 'rete-connection-plugin';
import VueRenderPlugin from 'rete-vue-render-plugin';

import CustomNodeComponent from './CustomNodeComponent.vue';
import CustomControlComponent from './CustomControlComponent.vue';

const container = document.querySelector('#rete');
const editor = new Rete.NodeEditor('demo@0.1.0', container);
editor.use(VueRenderPlugin);

class MyComponent extends Rete.Component {
  constructor() {
    super();
    this.data.render = 'vue';
    this.data.component = CustomNodeComponent;
    this.data.props = {};
  }
}

class MyControl extends Rete.Control {
  constructor() {
    super();
    this.data.render = 'vue';
    this.data.component = CustomControlComponent;
    this.data.props = {};
  }
}

const myComponent = new MyComponent();
editor.register(myComponent);
const myControl = new MyControl();
editor.register(myControl);

export default {
  name: 'Flow',
  mounted() {
  },
};
</script>

<style scoped lang="scss">
</style>

On launch, I’m not getting anything rendered, and get

The error appear to be at line 15 of my code

L15         -> const editor = new Rete.NodeEditor('demo@0.1.0', container);
rete.esm.js -> _this.view = new EditorView(container, _this.components, _assertThisInitialized(_this));
rete.esm.js -> _this.container.style.overflow = 'hidden';

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

@Ni55aN I was going to suggest the refs method but I’m still reading up on it. Also it’s a bit hard for a newbie like me to grok the layout of the examples in the retejs repo since these are done dynamically. Could you make a simple barebones example based on a new vue cli project with the best practices? The threejs example on codesandbox is also a bit heavy I fear.

iKlsR on Feb 25, 2019

obviously, since you have no nodes

Test (dont forget async mounted())

    editor.addNode(await myComponent.createNode({}));

Ni55aN on Feb 25, 2019

Parent of #rete element should have a sizes (and editor.view.resize() of course)

Ni55aN on Feb 25, 2019

#rete element doesn’t exist when the querySelector calling. All initial operations with HTML elements in template must by performed in mounted(). Moreover, querySelector is a bad practive for Vue.js - use a $refs

Ni55aN on Feb 25, 2019

I had this exact issue Saturday when I picked up this library since it’s been a minute since I have used Vue so fairly new to this whole babel webpack thing and also first time using the cli (vue ui is super cool as well). The issue is that the element isn’t ready when the script runs that portion of code. My solution might not be the best or correct but what worked for me is to your functionality into either an await call somewhere or perform this somewhere inside mounted() {}

My setup currently looks like this

<template>
    <div id="rete" v-show="visible" ref="rete"></div>
</template>

export default {
    methods: {
        async init() {
            // perform all initialization here
            let container = this.$refs.rete
        }

        mounted() {
            this.init();
        }
    }
}

To keep your single file component clean I would also recommend doing something like <script src="./Rete.js"></script> instead of chucking all your js inside as it can get unwieldy fast.

Note that I put async init, this is to make sure you can make await calls inside the function as you might need to do so when creating components.

This is just one part however and you will probably run into https://github.com/retejs/rete/issues/247 right after.

To fix that as well add @babel/plugin-transform-regenerator": "^7.0.0" and babel-polyfill": "^6.26.0" to your dependencies and follow the instructions in this comment https://github.com/retejs/rete/issues/247#issuecomment-459411540.

To continue documenting what I went through to get this working, also make sure that your rete div has at least the explicit height set for its style or it won’t be visible.

I would also recommend sticking to pure javacript for writing your js, adding typescript introduces a slew of issues so if you want to get something up and running without a bunch of fiddling don’t branch off.

iKlsR on Feb 25, 2019