Unexpected token when using ES6 classes in Ember

Question

I am trying to experiment with ember decorators, but can't even get to compile with fields on classes. Classes without fields are fine, but I get this error whenever there is a field:

Build Error (broccoli-persistent-filter:Babel > [Babel: l3utils])
l3utils/utils/misc-utils.js: Unexpected token (70:9)

  68 | 
  69 | class TestField extends EmberObject{
> 70 |   isField=true;
     |          ^
  71 |   qKey=null;
  72 |   _value=null;

If I just comment that out, then I get the same error on the @computed so it just doesn't seem like babel? eslint? is configured to parse the syntax at all. There's a lot of cruft in this project, but I would really like to get it going.

Does anyone have any idea as to where to look for versions or configs that may be wrong? I'm using Ember 3.3. Here are some maybe relevant versions from the package.json:

"devDependencies": {
    "@ember-decorators/babel-transforms": "^2.1.1",
    "babel-eslint": "^8.2.6",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^3.0.0",
    "ember-cli": "~3.3.0",
    "ember-cli-babel": "^6.17.2",
    "ember-cli-dependency-checker": "^2.0.0",
    "ember-cli-eslint": "^4.2.1",

I really don't understand what is going on int .eslint.js file. I try not to fool with these things too much in an effort to keep it as vanilla as possible, but it looks odd:

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  ecmaVersion: 6,
  sourceType: 'module'
 },
 plugins: [
 'ember'
 ],
 extends: [
  'eslint:recommended',
  'plugin:ember/recommended'
 ],
 env: {
  browser: true
 },
 rules: {
 }, ... and so on

I've tried changing that ecmaVersion to different settings and it doesn't seem to do anything - even if I change it to a nonsensical value. I kind of don't even know where to look since it doesn't produce any configuration errors - just that syntax error.

EDIT: If I make a new project, everything works fine in that project. I've compared eslint and package.json and can't find any differences that would matter

John Larson · Accepted Answer · 2018-09-24 01:49:05Z

0

Turns out the wrinkle was that the code I was actually editing was in an add-on of mine. You have to add @ember-decorators/babel-transforms and ember-decorators to the dependencies section of the add-on's package.json. This has to be done manually.

See this issue from ember-decorators: https://github.com/ember-decorators/ember-decorators/issues/134

answered Sep 24, 2018 at 1:49

John Larson

717 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unexpected token when using ES6 classes in Ember

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related