victor sosa victor sosa - 7 months ago 191
Javascript Question

Karma issue Javascript import SyntaxError

I am trying to run this spec and I got this error:
SyntaxError: import declarations may only appear at top level of a module

But as you see I have the import on top, so there's could be another reason for this?

ng-form-builder.spec.js

import angular from "angular";
import mocks from "angular-mocks";
import "src/ng-form-builder.js";

var inject = mocks.inject;
var module = mocks.module;

describe('ng-form-builder', function () {
var scope, $compile, $rootScope, element;

function createDirective(template) {
var elm;

elm = angular.element(template);
angular.element(document.body).prepend(elm);
$compile(elm)(scope);
scope.$digest();

return elm;
}

beforeEach(module('ngSanitize', 'peoplewareDo.ng-form-builder'));
beforeEach(inject(function(_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
scope = $rootScope.$new();
$compile = _$compile_;
}));


ng-form-builder.js

(function () {

'use strict';

angular.module('peoplewareDo.ng-form-builder', []).directive('ngFormBuilder', function () {
....
});

// coffeescript's for in loop
var __indexOf = [].indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item) return i;
}
return -1;
};

angular.module('peoplewareDo.ng-form-builder', []).directive('ngFormField', function($http, $compile) {
...

});

}());


console log

[vns@localhost ng-form-builder]$ gulp test
[15:01:07] Using gulpfile ~/workspace/ng-form-builder/gulpfile.js
[15:01:07] Starting 'clean'...
[15:01:07] Starting 'scripts'...
[15:01:07] Finished 'scripts' after 65 ms
[15:01:07] Starting 'styles'...
[15:01:07] Starting 'jshint-test'...
[15:01:07] Starting 'karma'...
[15:01:07] Finished 'clean' after 205 ms
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Firefox
[15:01:08] Finished 'jshint-test' after 346 ms
[15:01:08] Finished 'styles' after 500 ms
[15:01:08] Starting 'build'...
[15:01:08] Finished 'build' after 6.5 μs
INFO [Firefox 45.0.0 (Fedora 0.0.0)]: Connected on socket saObD8MsBt0Hw9swPwC5 with id 21261564
Firefox 45.0.0 (Fedora 0.0.0) ERROR
SyntaxError: import declarations may only appear at top level of a module
at /home/vns/workspace/ng-form-builder/test/ng-form-builder.spec.js:1
[15:01:11] 'karma' errored after 4.06 s
[15:01:11] Error: 1
at formatError (/usr/lib/node-v5.7.0-linux-x64/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp.<anonymous> (/usr/lib/node-v5.7.0-linux-x64/lib/node_modules/gulp/bin/gulp.js:195:15)
at emitOne (events.js:90:13)
at Gulp.emit (events.js:182:7)

Answer

The problem is that Firefox, which is the browser that this code is executed in as can be seen here:

INFO [Firefox 45.0.0 (Fedora 0.0.0)]: Connected on socket saObD8MsBt0Hw9swPwC5 with id 21261564
Firefox 45.0.0 (Fedora 0.0.0) ERROR

Does not support ES6 completely. Transpiling from ES6 to ES5 is required in order for this code to run.