CODEWITHSUNDEEP
ionic2electronelectron-buildernode-serialport
vicatcu
vicatcu

Reputation: 5877

Building Electron with Ionic2, serialport, and electron-builder

I'm not sure which of the platforms / tools is the root of my problem so asking this question on SO rather than the issues of one of the Git-Hub repositories. I'm trying to develop a project based on Polyonic. Polyonic itself is a kind of seed mashup of Electron and Ionic2. My project also uses node-serialport, which is a Native Module.

My development versions are: - Node 7.4.0 - Electron 1.6.10

... and running ionic info in the src folder of my project gives:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Gulp CLI         : CLI version 3.9.1 Local version 3.9.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-gulp          : 1.0.1
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.4.0
    OS         : Linux 4.6
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.0.5

If I do npm install in the src directory, then npm install in the root directory, the npm start in the root directory (which runs a gulp script in the Polyonic seed that bundles the Ionic project), the project launches and runs perfectly, no problems with node-serialport.

If I then build an executable by running electron builder in the root of my project, and then run the executable, in the Chrome DevTools console, I get this output:

Uncaught Error: The module '/home/vic/git/MyProject/build/node_modules/serialport/build/Release/serialport.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 51. This version of Node.js requires
NODE_MODULE_VERSION 53. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:173:20)
    at Object.Module._extensions..node (module.js:598:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:173:20)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at bindings (/home/vic/git/MyProject/build/node_modules/bindings/bindings.js:76:44)
    at Object.<anonymous> (/home/vic/git/MyProject/build/node_modules/serialport/lib/bindings.js:3:35)

I recognize that there are other related questions on SO that suggest using electron-rebuild to ensure the native modules are built against the version of node expected by Electron. But if I go into the project src folder, then run:

rm -rf node_modules/serialport/build/* 
node_modules/.bin/electron-rebuild -w serialport -f

... then go back into my project root folder and run npm start (it runs normally as before), then run electron-builder and run the executable, in the Chrome DevTools console, I get this output:

Uncaught Error: Cannot find module 'serialport'
    at Module._resolveFilename (module.js:470)
    at Function.Module._resolveFilename (/tmp/.mount_7laJTZ/usr/bin/resources/electron.asar/common/reset-search-paths.js:35)
    at Function.Module._load (module.js:418)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at Object.<anonymous> (main.js:73788)
    at __webpack_require__ (main.js:20)
    at Object.<anonymous> (main.js:72414)
    at __webpack_require__ (main.js:20)
    at Object.<anonymous> (main.js:111408)

This feels farther from working than I was before doing the electron-rebuild thing. Where am I going wrong? Any help or suggestions would be appreciated.

Upvotes: 0

Views: 852

Answers (2)

vicatcu
vicatcu

Reputation: 5877

After working through it offline with @develar, we were able to solve the problem. I'm posting back here and accepting his answer to give credit where credit is due.

This PR to the Polyonic project is a direct result. In my estimation, the key change, however, was modifying the build block of the root package.json to:

"build": {
  "appId": "YOUR.APPID.GOES.HERE",
  "directories": {
    "app": "build"
   }
},

... and making sure that electron was in the devDependencies section rather than the dependencies section.

The key point here is that Polyonic, when you run npm start bundles everything up and puts it into a build folder in the root of your project. Then it runs cd build && electron . to run launch project. According to the electron-builder docs:

  • directories

    • buildResources = build String - The path to build resources.
    • output = dist String - The output directory.
    • app String - The application directory (containing the application package.json), defaults to app, www or working directory.

... so setting build.directories.app to 'build' tells electron builder to package the build directory, which is just what I needed.

Upvotes: 2

develar
develar

Reputation: 995

If you will send me project in next hour, I will investigate what's wrong. You don't need to use electron-rebuild — electron-builder rebuilds automatically. (I am electron-builder maintainer.)

Upvotes: 2

Related Questions