Friday, April 1, 2016

Unexpected token import on Electron app

Leave a Comment

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

Answers 1

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')),         ]); }; 

Answers 2

@user104317 got it right, clipboard.js just didn't get "compiled" by rollup.

Just wanted to add that in your case, it should have been:

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

Then you could have left it at ./assets/scripts/clipboard.js.

If you end up having a lot of independent js files (you shouldn't if you're building a SPA), consider listing them automatically, like done in ./tasks/build/generate_spec_imports.js

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment