SyntaxError: Parse error problem, provided solutions don't seem to work.

[Korneliusz Caputa]

Hello.

I seem to have a commonly occuring problem with the SyntaxError: Parse error message, yet no solution for it that I came across solved my case.

I'm running Karma with Angular from under Yeoman scaffolding.

After much tweaking I ended up with the following scenario:

karma.conf.js:

// Karma configuration
// base path, that will be used to resolve files and exclude
basePath = "";

// list of files / patterns to load in the browser
files = [
    JASMINE,
    JASMINE_ADAPTER,
    "app/components/angular/angular.js",
    "app/components/angular-mocks/angular-mocks.js",
    "app/views/templates/*.html",
    "app/scripts/*.js",
    "app/scripts/**/*.js",
    "test/mock/**/*.js",
    "test/helpers/**/*.js",
    "test/spec/**/*.js"
];

// generate js files from html templates
preprocessors = {
    "views/templates/*.html": "html2js"
};


ngHtml2JsPreprocessor = {
    cacheIdFromPath: function(filepath) {
        return 'app/' + filepath;
    }
};

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: dots || progress || growl
reporters = ["progress"];

// web server port
port = 8181;

// cli runner port
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_DEBUG;

// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ["PhantomJS"];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

The error is as follows:

λ →  grunt karma:unit
Running "karma:unit" (karma) task
WARN [watcher]: Pattern "/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/test/mock/**/*.js" does not match any file.
INFO [karma]: Karma server started at http://localhost:8181/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.7 (Linux)]: Connected on socket id PQC6YNfgAEKlWkyaxxCi
PhantomJS 1.7 (Linux) ERROR
    SyntaxError: Parse error
    at /home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/views/templates/service.html:1
PhantomJS 1.7 (Linux): Executed 0 of 0 ERROR (0.089 secs / 0 secs)

My gruntfile (mostyl irrelevant probably):

"use strict";
var lrSnippet = require("grunt-contrib-livereload/lib/utils").livereloadSnippet;
var mountFolder = function(connect, dir) {
  return connect.static(require("path").resolve(dir));
};


module.exports = function(grunt) {
  // load all grunt tasks
  require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);


  // configurable paths
  var yeomanConfig = {
    app: "app",
    dist: "dist"
  };


  try {
    yeomanConfig.app = require("./component.json").appPath || yeomanConfig.app;
  } catch (e) {}


  grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
      coffee: {
        files: ["<%= yeoman.app %>/scripts/{,*/}*.coffee"],
        tasks: ["coffee:dist"]
      },
      coffeeTest: {
        files: ["test/spec/{,*/}*.coffee"],
        tasks: ["coffee:test"]
      },
      compass: {
        files: ["<%= yeoman.app %>/styles/{,*/}*.{scss,sass}"],
        tasks: ["compass"]
      },
      livereload: {
        files: [
          "<%= yeoman.app %>/{,*/}*.html",
          "<%= yeoman.app %>/views/{,*/}*.html",
          "{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css",
          "{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js",
          "<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}"
        ],
        tasks: ["livereload"]
      },
      test: {
        files: [
          "test/spec/{,*/}*.js"
        ],
        tasks: ["karma:unit"]
      }
    },
    connect: {
      options: {
        port: 9000,
        // Change this to "0.0.0.0" to access the server from outside.
        hostname: "localhost"
      },
      livereload: {
        options: {
          middleware: function(connect) {
            return [
              lrSnippet,
              mountFolder(connect, ".tmp"),
              mountFolder(connect, yeomanConfig.app)
            ];
          }
        }
      },
      test: {
        options: {
          middleware: function(connect) {
            return [
              mountFolder(connect, ".tmp"),
              mountFolder(connect, "test")
            ];
          }
        }
      }
    },
    open: {
      server: {
        url: "http://localhost:<%= connect.options.port %>"
      }
    },
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            ".tmp",
            "<%= yeoman.dist %>/*",
            "!<%= yeoman.dist %>/.git*"
          ]
        }]
      },
      server: ".tmp"
    },
    jshint: {
      options: {
        jshintrc: ".jshintrc"
      },
      all: [
        "Gruntfile.js",
        "<%= yeoman.app %>/scripts/{,*/}*.js"
      ]
    },
    karma: {
      unit: {
        configFile: "karma.conf.js",
        singleRun: false,
        autoWatch: true/*,
        browsers: ["PhantomJS"]*/
      },
      e2e: {
        configFile: "karma-e2e.conf.js",
        singleRun: false,
        autoWatch: true,
        browsers: ["Chrome"]
      }
    },
    coffee: {
      dist: {
        files: [{
          expand: true,
          cwd: "<%= yeoman.app %>/scripts",
          src: "{,*/}*.coffee",
          dest: ".tmp/scripts",
          ext: ".js"
        }]
      },
      test: {
        files: [{
          expand: true,
          cwd: "test/spec",
          src: "{,*/}*.coffee",
          dest: ".tmp/spec",
          ext: ".js"
        }]
      }
    },
    compass: {
      options: {
        sassDir: "<%= yeoman.app %>/styles",
        cssDir: ".tmp/styles",
        imagesDir: "<%= yeoman.app %>/images",
        javascriptsDir: "<%= yeoman.app %>/scripts",
        fontsDir: "<%= yeoman.app %>/styles/fonts",
        importPath: "<%= yeoman.app %>/components",
        relativeAssets: true
      },
      dist: {},
      server: {
        options: {
          debugInfo: true
        }
      }
    },
    concat: {
      dist: {
        files: {
          "<%= yeoman.dist %>/scripts/scripts.js": [
            ".tmp/scripts/{,*/}*.js",
            "<%= yeoman.app %>/scripts/{,*/}*.js"
          ]
        }
      }
    },
    useminPrepare: {
      html: "<%= yeoman.app %>/index.html",
      options: {
        dest: "<%= yeoman.dist %>"
      }
    },
    usemin: {
      html: ["<%= yeoman.dist %>/{,*/}*.html"],
      css: ["<%= yeoman.dist %>/styles/{,*/}*.css"],
      options: {
        dirs: ["<%= yeoman.dist %>"]
      }
    },
    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: "<%= yeoman.app %>/images",
          src: "{,*/}*.{png,jpg,jpeg}",
          dest: "<%= yeoman.dist %>/images"
        }]
      }
    },
    cssmin: {
      dist: {
        files: {
          "<%= yeoman.dist %>/styles/main.css": [
            ".tmp/styles/{,*/}*.css",
            "<%= yeoman.app %>/styles/{,*/}*.css"
          ]
        }
      }
    },
    htmlmin: {
      dist: {
        options: {
          /*removeCommentsFromCDATA: true,
          // https://github.com/yeoman/grunt-usemin/issues/44
          //collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeOptionalTags: true*/
        },
        files: [{
          expand: true,
          cwd: "<%= yeoman.app %>",
          src: ["*.html", "views/*.html"],
          dest: "<%= yeoman.dist %>"
        }]
      }
    },
    cdnify: {
      dist: {
        html: ["<%= yeoman.dist %>/*.html"]
      }
    },
    ngmin: {
      dist: {
        files: [{
          expand: true,
          cwd: "<%= yeoman.dist %>/scripts",
          src: "*.js",
          dest: "<%= yeoman.dist %>/scripts"
        }]
      }
    },
    uglify: {
      dist: {
        files: {
          "<%= yeoman.dist %>/scripts/scripts.js": [
            "<%= yeoman.dist %>/scripts/scripts.js"
          ]
        }
      }
    },
    rev: {
      dist: {
        files: {
          src: [
            "<%= yeoman.dist %>/scripts/{,*/}*.js",
            "<%= yeoman.dist %>/styles/{,*/}*.css",
            "<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}",
            "<%= yeoman.dist %>/styles/fonts/*"
          ]
        }
      }
    },
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: "<%= yeoman.app %>",
          dest: "<%= yeoman.dist %>",
          src: [
            "*.{ico,txt}",
            ".htaccess",
            "components/**/*",
            "images/{,*/}*.{gif,webp}",
            "styles/fonts/*"
          ]
        }]
      }
    }
  });

  grunt.renameTask("regarde", "watch");
  grunt.registerTask("server", [
    "clean:server",
    // "coffee:dist",
    // "compass:server",
    "livereload-start",
    "connect:livereload",
    "open",
    "watch"
  ]);


  grunt.registerTask("test", [
    "clean:server",
    // "coffee",
    // "compass",
    "connect:test",
    "karma:unit"
  ]);


  grunt.registerTask("build", [
    "clean:dist",
    "jshint",
    "test",
    // "coffee",
    // "compass:dist",
    "useminPrepare",
    "imagemin",
    "cssmin",
    "htmlmin",
    "concat",
    "copy",
    "cdnify",
    "ngmin",
    "uglify",
    "rev",
    "usemin"
  ]);

  grunt.registerTask("default", ["build"]);
};

And the application versions:

λ →  karma --version; node -v
Karma version: 0.9.5
v0.10.5

And one of the tests causing all the fuss:

describe("Directive service: ", function() {
    "use strict";
    var templatePath = "app/views/templates/service.html";


    beforeEach(module("serviceChooserApp"));
    beforeEach(module(templatePath));


    var element;


    it("should make hidden element visible", inject(function($rootScope, $compile) {
        element = angular.element("<service></service>");
        element = $compile(element)($rootScope);
        expect(element.text()).toBe("this is the service directive");
    }));
});

Any insight on this situation would be greatly appreciated.

Cheers!

[Vojta Jína]

Hi Korneliusz,

you are loading an HTML file as JS, that's why the syntax error. That means the html2js preprocessor does not work.
The patterns in preprocessors are resolved to the basePath, so change "views/templates/*.html" to "app/views/templates/*.html".

See http://karma-runner.github.io/0.8/config/preprocessors.html

That's how minimatch works, but I think we should change it. Too many people have issues with this.

V.

--
You received this message because you are subscribed to the Google Groups "karma-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to karma-users...@googlegroups.com.
To post to this group, send email to karma...@googlegroups.com.
Visit this group at http://groups.google.com/group/karma-users.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Korneliusz Caputa]

Unfortunately, changing to

preprocessors = {
    "app/views/templates/*.html": "html2js"
};

Produced only a new error:

PhantomJS 1.7 (Linux) Directive service:  should make hidden element visible FAILED
    Error: Unexpected request: GET views/templates/service.html
    No more request expected
        at $httpBackend (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular-mocks/angular-mocks.js:935)
        at sendReq (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:9147)
        at $http (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:8937)
        at /home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:9082
        at compileTemplateUrl (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:4501)
        at applyDirectivesToNode (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:4224)
        at compileNodes (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:3964)
        at compile (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:3902)
        at /home/main/Dropbox/JavaScript/AngularJS/serviceChooser/test/spec/directives/service.js:12
        at invoke (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular/angular.js:2902)
        at workFn (/home/main/Dropbox/JavaScript/AngularJS/serviceChooser/app/components/angular-mocks/angular-mocks.js:1778)

And this is the error I started with, which caused me to learn about the existence of html2js in the first place.

[Korneliusz Caputa]

How daft am I! You gave me the answer and my brain decided to ignore the scope of its application.

The case was that the app/views/templates/*.html path had to be specified for the preprocessor in the karma.conf.js file AND app/views/templates/service.html had to be given as the templateUrl of the directive.

Problem solved, thanks a million Vojta!

[Vojta Jína]

Awesome, glad it worked.

In upcoming version of Karma, it you can configure the resulting path/templateCache key, so that the url does not have exactly match the path on file system...

V.

--