javascriptangularjskarma-jasminegulp-karma

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)

Solution

  • 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.