Unexpected token error when migrating to native classes for components - ember.js

Question

I upgraded to Ember 3.11 and I want to start using native classes for my components.
When I change a component class to something similar like:
export default class MyClassName extends BaseComponent {
myFieldName;
}
I get a build error
"Parsing error: Unexpected token ;" because of the class field.
Ideas how to make sure ember-cli doesn't complain about the new syntax are more than welcome.
Thanks
UPDATE:
Following jelhan's suggestion below I updated my package.json file as in ember-cli/ember-new-output (https://github.com/ember-cli/ember-new-output/blob/master/package.json). This didn’t help. I also created a brand new ember project with a single component in it and I still have the same problem.
This is the package.json file which gets generated when creating new ember project (ember-cli 3.11.0):
{
"name": "my-project",
"version": "0.0.0",
"private": true,
"description": "Small description for my-project goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.6.0",
"#ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-cli": "~3.11.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.11.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^2.0.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^4.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.11.1",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.4"
},
"engines": {
"node": "8.* || >= 10.*"
}
}
Seems like the new syntax works fine. The javascript code executes as expected. I guess the errors I see in the build output are eslint errors only. I need to figure out how to configure eslint to understand the new syntax.

Answer 1

as #Lux pointed out in a comment, the value is missing.
This will fix your syntax error:
export default class MyClassName extends BaseComponent {
myFieldName = undefined;
}
Also, be sure to have the latest version of ember-cli-babel installed to ensure that you have the latest bundled set of babel plugins -- earlier versions of ember-cli-babel did not support classes. The latest at the time of writing this is 7.10.0 https://www.npmjs.com/package/ember-cli-babel
In classic syntax, this would be the equivalent of:
export default BaseComponent.extend({
myFieldName: undefined,
});
If you're curious about more of the differences -- here is a bit more information on native javascript classes in Ember from the ember-decorators documentation: https://ember-decorators.github.io/ember-decorators/docs/native-class-basics
On a somewhat related note:
I know it's been common in Ember to define all the properties a component may receive at the top to declare its API, but now is actually a really good time to get in to TypeScript, so that you may add more semantic meaning to your classes.
Initializing a property as undefined is the same as not specifying it, so with TypeScript, you can attain better semantics with:
interface Args {
myFieldName: string;
}
export default class MyClassName extends BaseComponent<Args> {
}
Assuming BaseComponent is a Glimmer Component, info here: https://octane-guides-preview.emberjs.com/release/upgrading/editions/#toc_tracked-properties
(EmberComponents don't accept Type Arguments, as far as I know)