(Electron - Vue) - dgram.createSocket is not a function

[5skyes]

Trying to create a fresh Electron / Vue app, having breaking issues implementing OSC.

Through out the entire process, booting electron yeilds a breaking error; "TypeError: dgram.createSocket is not a function"

• Created a project with vue create, (vue2)
• added electron with vue add electron-builder. version doesn't seem to matter, tested 7, 9, 11.
• npm i osc,
• npm i to force rebuild, also manually rebuilt as per node serial, also added an .npmrc target.
• Copy paste example code for UDP sockets.

The error exists within node / dgram - the problem exists in other OSC / udp libraries.

The particularly upsetting part of this is that I have another project that's built from an old vue-electron boilerplate that does work. I've compared the package.json entries to see if there are any deps that might be doing it, but there's nothing telling so far.

fwiw, I'd use the old boilerplate, but it's kinda buggy, and feels pretty bloated with stuff that has deep dependency within the backend code, so I'd have to rewrite the whole thing to remove said bloat. If I have to, I will, but I figured I'd ask someone more knowledgeable than I.

Thanks! ~ Tess

[colinbdclark]

Hey @TesseraSkye, sorry to hear you're having difficult getting osc.js to work. Can you create a simple test application and I'll try to take a look?

In the meantime, is your code that is using an osc.udpPort running in the Electron main process or in a renderer process (i.e. a BrowserWindow)? If the latter, have you enabled Electron's nodeIntegration option and disabled the contextIsolation option so that the Node.js API is available to your browser-side code?

I hope this helps! -Colin

[5skyes]

Hmm, looks like electron-vue uses a browser window by default. Added nodeIntegration and contextIsolation to my web prefs. nodeIntegration was already present, but set somewhere else in code, so I just overrode as true. I'll shoot you a repo with a test project in a second.

[colinbdclark]

Electron keeps tightening up its security so that people don't unintentionally expose Node APIs to third-party web content. So I believe those two flags are required in the latest version of Electron in order to be able to successfully use require() on Node libraries. Happy to take a look at your test when it's ready.

[5skyes]

Hmm, noted. fwiw, should I be using require() over import from?' It's definitly something to do with browserWindow - I just moved the code outside of the window declaration, and it's compiling. So something odd is going on.

https://github.com/TesseraSkye/oscjs_test Here's a repo to mess with. I've added the sample code I'm using in three places so you can just uncoment it to test. Inside background.js it seems to work. Inside main.js, it's broken, same with inside App.vue

[colinbdclark]

How do I run the app to test it? I tried with electron . but get errors related to Node's implementation of ES6 modules. I've never been a fan or users of ES6 modules, so I might just be a bit dumb here.

I did notice that the contextIsolation flag is set to true, but it should be false (I think) in order to access the Node globals.

[5skyes]

Just run yarn electron:serve or npm run electron:serve I'll mess with the context isolation flag

[5skyes]

Directly calling dgram.createSocket() also breaks in the same way. I wonder if it's something to do with the abstraction that vuex's router system provides?

[colinbdclark]

Sorry to be slow to respond but it's been a busy couple days. To be honest, though, I haven't been able to get your test application to run for a bunch of different reasons. First, your npm install script that runs electron-rebuild fails, and given that you've already set up a .npmrc file with the appropriate electron runtime configuration probably isn't necessary in the first place (npm will build native module dependencies from source against the Electron runtime when it installs them).

Running npm run electron:serve seems to just start up a web server with the Vue.js default app, not the Electron app itself. When I do manually launch your application using node_modules/.bin/electron ., it looks like the main path is incorrectly configured in package.json, and when I corrected that I got syntax errors on the first line.

I don't know how much of all of this is related to generated boilerplate from Vue, but it's all pretty complex. If you can get me an app that can be run simply with a standard Node/npm/Electron environment, I can try to take a closer look. But as you say, it does seem like your problem lies elsewhere in your configuration, rather than with osc.js.

[colinbdclark]

Any further updates on this? Were you able to get it to work, @TesseraSkye?

[5skyes]

I wish I could say I've figured it out. If I had to take a guess, it's something to do with browser windows, but I haven't gotten it to work yet. I kinda sidelined it for a bit, but I can poke at it when I get home.

[jellohouse]

@TesseraSkye any updates on this?

I am running into the exact same issue... any help would be greatly appreciated.

[5skyes]

@colinbdclark @jellohouse no progress unfortunately, I've since dropped the project.

[jellohouse]

For now I did a workaround where I send an OSC message by web socket from my Electron app to a node server, then on the server I receive the web socket message and I forward it by UDP.

A bit messy, but it works for now...