Strange Error with Electron Webpack (TypeError: plugin.install is not a function)

[prog-r-amer]

I am trying to use rete in an electron app with the vue render plugin. For that I use this repository: https://github.com/electron-userland/electron-webpack

Now I have 2 Files in the renderer folder: https://gist.github.com/prog-r-amer/5081e6b32751fae68ee0847924edd54e

And get this error: Uncaught (in promise) TypeError: plugin.install is not a function at NodeEditor.install [as use]

If I remove editor.use my program doesn't crash anymore, but I obviously don't see my node editor.

I would be very grateful if someone could help me setting up a basic editor with electron-webpack. Nice greetings, Toby

[Ni55aN]

Connection plugin since current version has a commonJS bundle with default export

editor.use(ConnectionPlugin.default);

Pay attention, you mixed up imports for rete-connection-plugin and rete-ealight-render-plugin

[prog-r-amer]

Thanks for the response,

if I correct the imports and change the editor.use to

editor.use(ConnectionPlugin.default);
editor.use(AlightRenderPlugin);

Now I get an error with super though:

Uncaught (in promise) Error: The key parameter is missing in super() of Control Would be nice if you could tell me how to fix this. My current Code for Reference:

https://gist.github.com/prog-r-amer/7664dde16694746fd4f7d0ecaeb98faa

[Ni55aN]

In latest versions must be

    constructor(emitter, key, readonly) {
        super(key);

[prog-r-amer]

Sorry for annoying you... If I only add super(key); nothing changes. If I add super(emitter, key, readonly) this gives me a lot of new errors:

$scan, error in expression: socket output {{toClassName(output.socket.name)}} Cannot read property 'name' of undefined.

in alight.js

I get this 6 times. Is this because of the new rete version and I have to change from angular to vue? I am sorry but I am really overwhelmed by all those errors.

[Ni55aN]

do you have a second argument in new NumControl (null is not allowed) ?

[Ni55aN]

https://gist.github.com/prog-r-amer/7664dde16694746fd4f7d0ecaeb98faa#file-electron_webpack_rete-js-L77 this code is deprecated. Please refer to example https://codepen.io/Ni55aN/pen/xzgQYq

[prog-r-amer]

Thanks a lot for the codepen. The last thing I struggle with is setting up Vue. I now get this:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

I know that this electron-webpack repo I am using has vue-loader preinstalled, this is what it says about it:

https://webpack.electron.build/add-ons#vuejs

Sadly I am still not smart enough to get it to work. I would be forever grateful if you could give me an example of how I either use this with a single file component supported by vue-loader or how I can setup a custom webpack configuration to work with the code you gave me.

https://webpack.electron.build/modifying-webpack-configurations

I didn't get this thing from the vue website to work with my directory structure, where everything vue is in node_modules:

  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

My project then doesn't even compile and says can't resolve vue.

Sorry, I am an absolute javascript noob and it really shows. I only use it because this was the best node editor library I could find ;) Thanks for all the help you provided so far.

[Ni55aN]

@prog-r-amer it will be enough to wrap an object component (if you are not using Single file components) https://github.com/retejs/examples/issues/9#issuecomment-436433281

[prog-r-amer]

It compiles now without errors, but the controls are missing. I just copy pasted in the codepen from you from above:

https://codepen.io/Ni55aN/pen/xzgQYq

Do you have any ideas why this could be?

[Ni55aN]

I don't see any reasons for this issue. Can you share your all code?

[prog-r-amer]

My current Code: https://gist.github.com/prog-r-amer/65f51a867585042ae1025949912731a0

I'm not getting any errors, and the control div in the dom is just empty.

[prog-r-amer]

Maybe the same problem as here? #249

[prog-r-amer]

I got it to work by putting the component in it's own .vue file and importing it with const comp = require("./component.vue").default;

Single File Component for Reference

<template>
<input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop=""/>
</template>

<script>
export default
{
props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
  data() {
    return {
      value: 0,
    }
  },
  methods: {
    change(e){
      this.value = +e.target.value;
      this.update();
    },
    update() {
      if (this.ikey)
        this.putData(this.ikey, this.value)
      this.emitter.trigger('process');
    }
  },
  mounted() {
    this.value = this.getData(this.ikey);
  }
}
 </script>

If it works now without resizing my window you can close the issue and it's perfect. For now the the Control in the Add Component is empty, and the window is empty too until I resize it. (no idea why)

[Ni55aN]

Maybe the same problem as here? #249

yes

[Ni55aN]

For now the the Control in the Add Component is empty, and the window is empty too until I resize it. (no idea why)

Did you call editor.view.resize();?

[Ni55aN]

I have no idea why this method does not work: https://github.com/retejs/examples/issues/9#issuecomment-436433281

Angular example has identical code

[Ni55aN]

I have reproduced issue: rete-vue-render-plugin uses a vue v2.5.17 (when build project with webpack), but control component is compiled via 2.6.*. It is strange that does not show any error

[prog-r-amer]

Thanks for the tip with the missing editor.resize, I am happy with how it works now with the single file vue component.