Error: "SyntaxError: class is a reserved identifier"


#1

I have some older browsers that I need to support. In particular FF38. I am currently running Ember v3, with ember-cli-babel installed (version 6.12.0).

My ember-cli-build.js looks like this:

  let app = new EmberApp(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    },
    babel: {
      plugins: [
        'transform-object-rest-spread'
      ]
    }
  });

However … I am still getting an error:

SyntaxError: class is a reserved identifier

Specifically, the code it is griping about is this:

  /**
   * AJAX Promise
   *
   * Sub-class of RSVP Promise that passes the XHR property on to the
   * child promise
   *
   * @extends RSVP.Promise
   * @private
   */
  class AJAXPromise extends Ember.RSVP.Promise {
    /**
     * Overriding `.then` to add XHR to child promise
     *
     * @public
     * @return {AJAXPromise} child promise
     */
    then() {

What am I missing? Isn’t this the whole point to using babel, to fix these issues? Why isn’t Ember and Babel transpiling this for me? What am I missing?


#2

What is in your config/targets.js? Is the error happening in local dev builds or production builds?


#3

Alright, I’m feeling a little sheepish. Looks like this was my problem. I found browserlist and the docs to configure to do what I needed.

  'ie 11',
  'last 1 Chrome versions',
  'Firefox >= 38',
  'last 1 Safari versions'
];```

I am all set. Is there a "mark resolved" flag here?