How to bundle javascript using Parcel in Electron?

Question

I'm using https://github.com/parro-it/electron-parcel-example to use Parcel with Electron.

My project is https://github.com/patrykkalinowski/dcs-frontlines-electron

I have basic setup where renderer.js is served by Parcel correctly:

renderer.js:

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

require('./app/map')

app/map.js: (ommited non-relevant code)

module.exports = {
    addFeature: function(coords) {
        unitsSource.addFeature(new Feature(new Circle(coords, 1e6)))
    }
}

import { Buffer } from "buffer"; // needed after 'fs' is being transpiled

const fs = require ('fs');

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Feature from 'ol/Feature.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Circle from 'ol/geom/Circle.js'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';

So far so good, it works. Problem arises when trying to add another file to the mix:

app/dcs.js:

const mgrs = require('mgrs')
const map = require('./map')

module.exports = {
    receiveData: function(data) {
        data = JSON.parse(data)
        keys = Object.keys(data)

        for (key of keys) {
            var mgrs_string = data[key].mgrs_position.UTMZone + data[key].mgrs_position.MGRSDigraph + data[key].mgrs_position.Easting + data[key].mgrs_position.Northing

            var coords = mgrs.toPoint(mgrs_string)
            map.addFeature(coords)

        }
    }
}

map.addFeature([0,0]) // testing

npm start results with:

App threw an error during load
/Users/patryk/Code/dcs-frontlines-electron/app/map.js:7
import { Buffer } from "buffer"; // needed after 'fs' is being transpiled
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:752:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:677:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:609:12)
    at Function.Module._load (internal/modules/cjs/loader.js:601:3)
    at Module.require (internal/modules/cjs/loader.js:715:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/patryk/Code/dcs-frontlines-electron/app/dcs.js:2:13)
    at Module._compile (internal/modules/cjs/loader.js:815:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)

This error is caused by require('./map') in dcs.js file (2nd line)

I think that I need to tell Parcel to include dcs.js file in the build, but how to do it?

This is my Parcel code in main.js:

// Parcel bundler
function runParcel() {
  return new Promise(resolve => {
    let output = "";
    const parcelProcess = execa("parcel", ["index.html"]);
    const concat = chunk => {
      output += chunk;
      console.log(output);
      if (output.includes("Built in ")) {
        parcelProcess.stdout.removeListener("data", concat);
        console.log(output);
        resolve();
      }
    };
    parcelProcess.stdout.on("data", concat);
  });
}

Which version of node are you using? This looks like an issue with understanding ES6 imports. — cmbuckley, Aug 04 '19 at 23:41

ford04 · Answer 1 · 2019-08-06T14:04:42.793

Your error is an indication that the invoking javascript code doesn't understand ES Modules import syntax. In your case the invoking code comes from Electron. Your dependencies are like this:

main.js ---> ./app/dcs.js ---> ./map.js 

// ./map.js contains ES import
import { Buffer } from "buffer";

, starting here.

And Electron doesn't understand import natively. I am not sure, if you can bring Electron to support it by passing node flags via --js-flags. As node supports ES modules e.g. via --experimental-modules --es-module-specifier-resolution=node and Electron is based on node.js, maybe that's a thing. But haven't tested that.

A safe alternative is to use Babel to transpile your Electron code first to CommonJS syntax, e.g.:

babel <your-electron-files-or-folder> --out-dir ./dist/main

.babelrc:

{
  ...
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

Or create a main bundle with parcel build main.js --target: node.

Hope, that helps.

How to bundle javascript using Parcel in Electron?

1 Answers1