Issue with native node modules.

[hadees]

Issue with native node modules.

[SimulatedGREG]

@hadees

You may need an appropriate loader to handle this file type.

It would seem you are trying import the file WebChimera.js.node which has the extension of .node. By default electron-vue's webpack configuration doesn't know how to handle the .node extension. You can edit webpack.config.js to support this by changing L31 to...

test: /\.(js|node)$/,

Hope this helps 🙂

[hadees]

@SimulatedGREG thanks for the fast response! No dice on the fix, still getting that error. Here are my full logs if that helps.

Also besides unzipping the prebuilt the only other change I made to your template was adding

  var test = require('webchimera.js')
  console.log(test)

in App.vue

[SimulatedGREG]

@hadees do you have a repo I could look at... 👀

[hadees]

@SimulatedGREG here is a repo I just pushed up. If you want to run it you'll need to make sure you have electron at version 1.3.1 and have a prebuild installed in the app/node_modules. I have the OSX one in the repo.

Thanks for the help, I really like your git book and the project structure which is why i've been putting so much effort to try and get this to work.

[SimulatedGREG]

@hadees

I've been trying to get the prebuilt library installed from npm, but it seem the prebuilt doesn't exist for electron v1.3.1 on the registry (and then sometimes it does????). Went ahead and extracted the contents of the library you provided and put the folder into app/node_modules.

It's simple to import/require the prebuilt-binary in the app, but the problem that happens is that webpack doesn't know it shouldn't be bundling a binary file. To get around this, you would need to require the module within your app/src/main.ejs and make the module available to global scope. The 2 major side-effects of doing this is that when you build your app for production node_modules are not included, therefore the prebuilt-binary would need to be added back manually after building. The other problem is that require doesn't work like it should in development (webpack does some sort of hijacking that I can't figure out how to adjust), meaning in order to actually test anything related to the module you would have to build your app every time (which is very counterintuitive).

a few hours of hitting my head on my keyboard later...

I found a loader that supposedly supports bundling .node binaries. Went ahead and did npm install https://github.com/kevzettler/node-loader and was able to require it by doing...

App.vue

<script>
  import store from 'src/vuex/store'
  window.wcjs = require('node!webchimera.js/WebChimera.js.node')

  export default {
    ready () {
      console.log(window.wcjs)
    },
    store
  }
</script>

I was able to get the above code working fine and was able to look at the module in the dev tools. Unfortunately, it would seem as soon as the library is used (i.e. window.wcjs.createPlayer()) electron just freezes indefinitely. Because of this, I'm unable to determine if the node-loader is creating an issue or if the prebuilt binary is unstable with electron v1.3.1.

In the end, native node modules are still rather difficult to work with reliably (speaking from friends/personal experience). I'm sorry I wasn't able to provide a decent solution for you. I've had similar cases in the past with native node modules and have always had to do something hacky in the end. Webpack was meant for mainly handling JS modules and has been somewhat adapted to go further towards electron specifics.

You did mention that you were able to get this module working inside the main process, so you might be able to expose the module to the global scope and share it to the renderer process. This might be the best case scenario (if it works properly). Here's the docs for remote.getGlobal()... https://github.com/electron/electron/blob/master/docs/api/remote.md#remotegetglobalname.

I'm going to close the as it doesn't pertain to an internal problem with electron-vue itself. Best of luck to you,
I tried 😕

P.S.: (A note on using webpack externals) From what I understand externals just ignores the module to where it doesn't pass it through a loader and just takes the raw input and bundles it. Since the modules is a .node binary this would not be a proper solution in this JS environment.

[hadees]

@SimulatedGREG The thing about webpack that I still don't really understand is what it must be doing to require to end up with different results from the other demo app I was using that worked perfectly. Thanks for trying.

Anyway I do like your file format, could you perhaps offer some advice on how to it with gulp? I do a lot of coffeescript day to day but not a whole lot of node. Right now I was figuring copying everything over to app/dist and having electron load that file. I'm not sure what the build would be but I figure it would end up similar to yours.