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';

[iKlsR]

@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.

[Ni55aN]

obviously, since you have no nodes

Test (dont forget async mounted())

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