Karma issue Javascript import SyntaxError

Question

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)

I also thought on that but I commented out and got the same issue, so yes it is valid. — victor sosa, Apr 28 '16 at 19:17
Maybe `module` is causing you trouble. Try changing the variable's name perhaps — Omri Aharon, Apr 28 '16 at 19:18
Ok I think I know. The code looks like it's run on Firefox, which does not support ES6 natively, and it does not seem you use babel to transpile to ES5. — Omri Aharon, Apr 28 '16 at 19:22
@OmriAharon ok, so how do I do that, any tutorial?? so I need to change the karma.conf.js I suppose, right?? — victor sosa, Apr 28 '16 at 19:25
This might help: https://www.npmjs.com/package/gulp-babel If not try to google some more, haven't done babel + gulp myself. But basically you just need to run the babel task on your files and then consume the generated ES5 files instead of your original ES6 ones — Omri Aharon, Apr 28 '16 at 19:27
@OmriAharon I did setup babel with karma but getting another issue ReferenceError: System is not defined at /home/vns/workspace/ng-form-builder/test/ng-form-builder.spec.js:3 — victor sosa, Apr 29 '16 at 00:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110638/discussion-between-victor-sosa-and-omri-aharon). — victor sosa, Apr 29 '16 at 12:03

score 1 · Accepted Answer · edited Apr 29 '16 at 14:59

1

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.

edited Apr 29 '16 at 14:59

victor sosa

899
13
27

answered Apr 29 '16 at 13:49

Omri Aharon

16,959
5
40
58

You may want to check this other issue that I have; https://stackoverflow.com/questions/36939435/karma-issue-javascript-referenceerror-system-is-not-defined – victor sosa Apr 29 '16 at 14:33

score 0 · Answer 2 · answered Jul 25 '16 at 09:48

0

import is the ES2015 feature and currently many browsers wont support this. Use Babel- a javascript compiler which compiles from EC2015 to ES5.

answered Jul 25 '16 at 09:48

Irannabi

129
1
4
15

Karma issue Javascript import SyntaxError

2 Answers2