Unexpected token import on Electron app

Viewed 2911

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.

2 Answers
Related