Over the last few years, we’ve been moving away from Ember’s legacy .extend({ ... }) syntax and towards native-class syntax like class extends Foo {...}.
While the legacy syntax is technically still supported, modern JS tooling including IDEs, and Prettier 3.0, do not support decorators in the legacy object-literal-based syntaxes. In the latest version of our recommended linting config, you’ll see these errors when using legacy syntax:
ESLint: error Native JS classes should be used instead of classic classes ember/no-classic-classes
Prettier: SyntaxError: Decorators cannot be used to decorate object literal properties
So, if you haven’t already, it’s time to update your theme and plugin code to the new syntax. There are two main things to update: new class definitions, and modifyClass calls.
Class definitions
Much of the work can be done using the ember-native-class-codemod. From inside your theme/plugin repository, run:
NO_TELEMETRY=true npx ember-native-class-codemod@4.1.1 --no-classic-decorator **/*.js
This will run through your files and transform them to the new native-class syntax. Sometimes it’ll prompt you to intervene manually. Always review the code changes it makes - it’s not perfect.
If you have many themes/plugins to update, you may be interested in our mass-pr script.
modifyClass calls
If you use decorators inside modifyClass calls, then you need to use the new native-class-based syntax. For more info on that, check out the documentation. As you make these changes, please bear in mind the documented limitations.