ES6 via jspm errors in Firefox, Edge, Vivaldi, but works in Chrome, Opera

Question

I'm using ES6 via jspm + SystemJS + traceur according to jspm tutorial.

Everything works fine in Chrome and Opera, however, console posts various errors in other browsers.

Firefox: SyntaxError: class is a reserved identifier, uncaught exception: SyntaxError: class is a reserved identifier

Edge: SCRIPT1002: Syntax error, Potentially unhandled rejection [2] Syntax error

Vivaldi: Unexpected token =>

SystemJS readme states that it runs even IE8+.

My jspm.config.js:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "traceur",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  shim: {
    "packages": {
      "assets/js/lib/tabs": {
        "main": "tabby",
        "format": "global",
        "deps": "jquery",
        "exports": "$.tabby"
      },
      "assets/js/lib/select": {
        "main": "selectify",
        "format": "global",
        "deps": "jquery",
        "exports": "$.selectify"
      }
    }
  },

  map: {
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "core-js": "npm:[email protected]",
    "jquery": "github:components/[email protected]",
    "jquery-mask-plugin": "npm:[email protected]",
    "jquery-validation": "github:jzaefferer/[email protected]",
    "selectify": "assets/js/lib/select",
    "tabby": "assets/js/lib/tabs",
    "traceur": "github:jmcriffey/[email protected]",
    "traceur-runtime": "github:jmcriffey/[email protected]",
    "github:jspm/[email protected]": {
      "assert": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },
    "github:jzaefferer/[email protected]": {
      "jquery": "github:components/[email protected]"
    },
    "npm:[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    }
  }
});

And package.json:

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "project_description",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "project_author",
  "license": "ISC",
  "devDependencies": {
    "glob": "^5.0.15",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-concat-css": "^2.2.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jspm": "^0.3.2",
    "gulp-less": "^3.0.3",
    "gulp-minify-css": "^1.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "imagemin-pngquant": "^4.2.0",
    "jspm": "^0.16.11"
  },
  "jspm": {
    "configFile": "jspm.config.js",
    "dependencies": {
      "jquery": "github:components/jquery@^2.1.4",
      "jquery-mask-plugin": "npm:jquery-mask-plugin@^1.13.4",
      "jquery-validation": "github:jzaefferer/jquery-validation@^1.14.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4",
      "traceur": "github:jmcriffey/[email protected]",
      "traceur-runtime": "github:jmcriffey/[email protected]"
    }
  }
}

Desperate to solve this situation, as I understand, that there could be many reasons for it. Maybe someone run across similar issue with that setup.

Answer 1

Got it.

This was due to one of the plugins, which was provided in jspm.config.js shim. The plugin was using an Immediately-Invoked Arrow Function notation and word class without any export directive, and thus, shim plugin wasn't transpiled into ES5.

So instead of using ES6 classes in third-party libraries (shim plugins) it should be build with simple prototypal inheritance.

Cost me several hours to find out.