4

I've been struggling with this for a week now so I thought I'd reach out to the amazing SO community for help. I've got an Electron project that needs to produce an OS X application (and Windows eventually). Initially we were using webpack to bundle everything (electron and front-end code) but, with the addition of some features that utilize ffi, this was no longer an option. After switching to using gulp to transpile and uglify the electron code, the app was working in development.

The problem I'm having is, when using electron-packager, none of my node_modules are being bundled during the build. According to the docs, electron-packager should bundle anything listed in the dependencies section of package.json. I built a simple proof-of-concept app to simplify things and modules still aren't being bundled for the electron code. This new, simplified project is just trying to include bunyan (this also fails for ffi) but, after building, the app complains that the bunyan module cannot be found. Can someone help? Am I missing something small but important? Here's some detail to the project:

Environment Details

  • OSX Version: 10.11.6 (15G1108)
  • Node Version: 5.2.0 (using nvm)
  • npm version: 3.3.12

package.json

{
    "name": "build-with-native-modules",
    "version": "1.0.0",
    "description": "A test for Electron packages with native Node modules.",
    "main": "el/main.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "clean": "./node_modules/.bin/rimraf build",
      "start": "npm run clean && gulp && ./node_modules/.bin/electron ./build/dist/el/main.js",
      "electron:rebuild": "./node_modules/.bin/electron-rebuild",
      "build:osx": "gulp build:osx",
      "cinstall": "rm -Rf ./node_modules && npm cache clean && npm i && npm run electron:rebuild"
    },
    "postinstall": "install-app-deps",
    "author": "Zachary Abresch <[email protected]>",
    "license": "MIT",
    "dependencies": {
      "bunyan": "^1.8.4",
      "jquery": "^3.1.1"
    },
    "devDependencies": {
      "babel-cli": "^6.18.0",
      "babel-core": "^6.18.2",
      "babel-eslint": "^7.1.0",
      "babel-loader": "^6.2.7",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-stage-0": "^6.16.0",
      "babel-register": "^6.18.0",
      "electron": "1.4.6",
      "electron-packager": "^8.2.0",
      "electron-rebuild": "^1.3.0",
      "eslint": "^3.9.1",
      "eslint-config-airbnb": "^13.0.0",
      "eslint-plugin-import": "^2.2.0",
      "eslint-plugin-jsx-a11y": "^2.2.3",
      "eslint-plugin-react": "^6.6.0",
      "gulp": "^3.9.1",
      "gulp-babel": "^6.1.2",
      "gulp-util": "^3.0.7",
      "rimraf": "^2.5.4",
      "webpack": "^1.13.3",
      "webpack-dev-server": "^1.16.2"
    }
  }

gulpfile.babel.js

  import gulp from 'gulp';
  import babel from 'gulp-babel';
  import gutil from 'gulp-util';
  import webpack from 'webpack';
  import packager from 'electron-packager';

  import webpackConfig from './webpack.config.babel';
  import pack from './package.json';

  gulp.task('electron:babel', () => {
    gulp.src('src/el/**/*.js', { base: 'src' })
    .pipe(babel())
    .pipe(gulp.dest('build/dist'));
  });

  gulp.task('move:html', () => {
    gulp.src('src/ui/**/*.html', { base: 'src' })
    .pipe(gulp.dest('build/dist'));
  });

  gulp.task('move:package', () => {
    gulp.src('package.json', { base: './' })
      .pipe(gulp.dest('build/dist'));
  });

  gulp.task('ui:webpack', (done) => {
    const myConfig = Object.create(webpackConfig);

    webpack(myConfig, (err, stats) => {
      if (err) throw new gutil.PluginError('ui:webpack', err);
      gutil.log('[ui:webpack]', stats.toString({ colors: true }));
      done();
    });
  });

  const osxBuildOptions = {
    arch: 'x64',
    'app-copyright': '8x8, Inc.',
    'app-version': '1.0.0',
    'build-version': '1.0.0',
    dir: './build/dist',
    name: pack.name,
    out: './build/bundle',
    overwrite: true,
    version: pack.devDependencies.electron,
  };

  gulp.task('build:osx',
    ['move:package', 'electron:babel', 'ui:webpack', 'move:html'],
  (done) => {
    packager(osxBuildOptions, (err, appPath) => {
      if (err) throw new gutil.PluginError('electron-packager', err);
      gutil.log(`[build:osx] App built in: ${appPath}`);
      done();
    });
  });

  gulp.task('default', ['electron:babel', 'ui:webpack', 'move:html']);

webpack.config.babel.js

import path from 'path';

  module.exports = {
    target: 'electron',
    entry: './src/ui/renderer.js',
    output: {
      path: path.resolve(__dirname, 'build/dist/ui'),
      filename: 'ui.bundle.js',
    },
    module: {
      loaders: [
        {
          loader: 'babel-loader',
          include: [
            path.resolve(__dirname, 'src/ui'),
          ],
          test: /\.js/,
        },
      ],
    },
  };

I'm considering trying out electron-builder but I really feel like this should be working. If anyone has any info or insight I'd greatly appreciate it. If you need any additional information, please let me know in the comments. Thanks!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.