Duplicate keys detected running simple CodePen example

[ichko]

• I am trying to run this example: https://codepen.io/Ni55aN/pen/xzgQYq
• I installed rete trough npm and I am using webpack
• When I run the example the UI is present, and functional, but I get the following error in the console: [Vue warn]: Duplicate keys detected: 'num'. This may cause an update error. I could not find open or closed issue with this here. Can you help me?

[kfina91]

I got the same error, but found a solution. First, steps to reproduce for devs:

1. vue create rete-test
2. App.vue, paste code of (https://codepen.io/Ni55aN/pen/xzgQYq) in beginning of script / the async function into mounted and comment out node creation. (I also needed to remove .default for the editor.use statements and define the components variable.)
3. npm run serve
4. create a node

Fix: in NumControl change the constructor:

class NumControl extends Rete.Control {
  constructor(emitter, key, readonly) {
    super(key + "_control"); // added a different key here
    this.component = VueNumControl;
    this.props = { emitter, ikey: key, readonly };
  }

and change the AddComponent accordingly.

class AddComponent extends Rete.Component {
    [...]
    builder(node) {
         // Only change this line
         var out = new Rete.Output('onum', "Number", numSocket); // change the outputs name to onum (because num is already an input)
    }
    [...]
    worker(node, inputs, outputs) {
        var n1 = inputs['num'].length?inputs['num'][0] : 0;
        var n2 = inputs['num2'].length?inputs['num2'][0] : 0;
    var sum = n1 + n2;

    this.editor.nodes.find(n => n.id == node.id).controls.get('preview_control').setValue(sum); // change to preview_control here
        outputs['onum'] = sum; // set the new output name
    }
}

[ichko]

I kind of already found another library for node editing, but I might try it out. Thanks! It is interesting why is it not erroring out in the codepen example?