Search code examples
javascriptelectrones6-module-loaderrollupjs

Unexpected token import on Electron app

I have built an app using GitHub's Electron. I am using the recommended way of loading modules, the ES6 syntax of:

import os from 'os'

After downloading the boilerplate the app is working fine. I have been able to import scripts in the background.js file without issue. Below is how I am loading my custom module:

import { loadDb } from './assets/scripts/database.js';

However, when I open a new browser window (clipboard.html) within Electron I am then loading a JavaScript file (clipboard.js) which in turn tries to import modules. At this point I am getting an Unexpected token import error.

My clipboard.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Electron Boilerplate</title>

    <link href="./stylesheets/main.css" rel="stylesheet" type="text/css">

    <script>
        window.$ = window.jQuery = require('./assets/scripts/jquery-1.12.1.min.js');
    </script>
    <script src="./assets/scripts/clipboard.js"></script>
</head>
<body class="clipboard">[...]</body></html>

My clipboard.js file:

import { remote } from 'electron'; // native electron module
import { loadDb } from './assets/scripts/database.js';

const electron = require('electron');

document.addEventListener('DOMContentLoaded', function () { 
    var db = loadDb();
    db.find({ type: 'text/plain' }, function (err, docs) {
        var docsjson = JSON.stringify(docs);
        console.log(docsjson);
    });
});

Just to re-iterate, the same code is used within app.html, which is my app's main window, and this does not error.

It feels like the main window is initialising something that my clipboard.html window isn't (perhaps 'Rollup'?), but there's nothing explicit within my app's code to suggest this.

Solution

  • You need to run clipboard.js through rollup first. Rollup parses the import statements. You have to modify tasks/build/build.js to do that.

    var bundleApplication = function () {
    return Q.all([
            bundle(srcDir.path('background.js'), destDir.path('background.js')),
            bundle(srcDir.path('clipboard.js'), destDir.path('clipboard.js')), // Add this line
            bundle(srcDir.path('app.js'), destDir.path('app.js')),
        ]);
};