Using Modules in Electron

Description

I get the error Uncaught TypeError: require.register is not a function

Environment

1. Brunch: 2.3.2
2. Node: 4.2.3
3. NPM: 3.7.1
4. Operating system: Windows 10

package.json contents

{
  "name": "electron-boilerplate",
  "productName": "ElectronBoilerplate",
  "version": "0.0.0",
  "description": "My riveting app",
  "license": "MIT",
  "author": {
    "name": "James Abels",
    "email": "[e-mail]",
    "url": "jamesabels.net"
  },
  "electronVersion": "0.36.0",
  "scripts": {
    "test": "xo",
    "start": "electron ./public",
    "build": "electron-packager . $npm_package_productName --out=dist --ignore='^/dist$' --prune --asar --all --version=$npm_package_electronVersion"
  },
  "files": [
    "index.js",
    "index.html",
    "index.css"
  ],
  "keywords": [
    "electron-app",
    "electron"
  ],
  "dependencies": {
    "electron-debug": "^0.5.0"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "autoprefixer": "^6.3.3",
    "babel-brunch": "^6.0.0",
    "babel-preset-es2015": "^6.5.0",
    "breakpoint-sass": "^2.7.0",
    "brunch": "^2.4.2",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "^2.0.0",
    "electron-packager": "^5.0.0",
    "electron-prebuilt": "^0.36.0",
    "javascript-brunch": "^2.0.0",
    "modularscale-sass": "^2.1.1",
    "postcss-brunch": "^0.5.0",
    "require": "^2.4.20",
    "sass-brunch": "^2.0.0",
    "susy": "^2.2.12",
    "uglify-js-brunch": "^2.0.0",
    "xo": "^0.12.0"
  },
  "xo": {
    "esnext": true,
    "envs": [
      "node",
      "browser"
    ]
  }
}

brunch config contents

exports.config =
  files:
    javascripts:
      joinTo: {
        'js/app.js': /app[\\/]vendor[\\/]/,
        'js/vendor.js': /app[\\/]vendor[\\/]libs[\\/]/,
        'js/modules.js': /app[\\/]modules[\\/]/,
      },
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'templates.js'

  plugins:
# Compile SASS
    sass:
      mode: 'native'
# Compile ES2015 Syntax
    babel:
      babelrc: true
      pattern: /\.(es6|jsx)$/
#    Further process your CSS
    postcss:
      processors: [
        require('autoprefixer')(['last 8 versions']),
      ]
#  MODULE SETTINGS
  modules: {
#    wrapper: false
#    definition: false
  }

Other useful files, when present (bower.json etc.)

babel.rc contents

{
  "presets": ["es2015"],
  "plugins": [],
  "ignore": [
    "node_modules",
    "bower_components",
  ]
}

Everything works fine if you do brunch watch or brunch build, but the error gets thrown when inside electron. If you just write static HTML/JS/CSS without trying to use modules, everything works fine as well.

Also, you can see the code that’s giving me this error here: https://github.com/jamesabels/Electron-Boilerplate-Brunch

[goshacmd]

Apparently, electron defines its own require to interface with node.

One way around that would be to:

• assign default require to another name, like nodeRequire:

<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>

before any of your javascripts are loaded.

See this section from the official Electron FAQ: http://electron.atom.io/docs/v0.36.8/faq/electron-faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

• use nodeRequire to interface with native modules
• use require for loading your own modules build with brunch and to load electron from within app/assets/index.js (since this one is executed before even the page is loaded)

I’ve applied the described changes to your starter app and got it running successfully.

See https://github.com/goshakkk/Electron-Boilerplate-Brunch/commit/b5b54ebaf5734ca79361d4166f6249534c49df88

[tolyo]

@goshakkk @jamesabels This is awesome. Just added Electron to Ionic @tolyo/ionic-bruch-seed. Works like a charm.