Ember: Assertion Failed: The @action decorator must be applied to methods when used in native classes

1

Version: Ember Octane v4.11

Assertion Failed: The @action decorator must be applied to methods when used in native classes

I am hoping someone could help understand this error thrown on a Glimmer component with @action annotations. I am not sure I quiet understand where the issue is.

The Ember inner code is trying to run _applyDecoratedDescriptor with [_object.action] on the component methods that I have marked with @action from ‘@ember/object’ , but it is failing because somehow is not recognizing one of the methods as such I guess. It is not obvious which one of the methods is causing the problem and they all seem fine from what I understand.

Thanks in advance!

2

It’s hard to debug without seeing any code, but I can tell you that the decorator must be applied to functions that are “formally defined” on the class (probably better terminology for that but not sure what it is). To illustrate:

function someFunction() {
  ...
}

export default class SomeComponent extends Component {
  @action // this works fine because it's actually a. method on the class
  validFunction() {
    ...
  }

  @action // this does not work because it is a property which is set to a function in the constructor
  invalidAction = someFunction;

  @action // this also does not work for the same reason
  alsoInvalidAction = (foo) => { ... };
}

If you have one of these cases, e.g. if you are importing a shared util function and trying to use it as an action, you may have to do something really annoying like:

import someSharedFunction from '...';

export default class SomeComponent extends Component {
  @action
  handleFoo(...) {
    this.someSharedFunction(...)
  }

  someSharedFunction = someSharedFunction;
3

Thanks for the detailed answer Dan. Unfortunately I could not share the code I am working with but none of the cases you pointed at apply in my situation. These are all normal function definitions, actions on a glimmer component. I am trying to isolate which one is the issue and go from there. It would be helpful if Ember would pin point which one was the problem.

Thanks again!

4

Hmm yeah that’s unfortunate. In that case, if it were me, I’d probably try sticking some breakpoints into the action decorator code somewhere and trying to figure out what method is causing the problem. You could also try turning on pause on exceptions in the debugger and back up the call stack until you get to the point where there’s context available.

5

I faced the same error. In my case, it was because I had a property with the same name than the action. Change the name of one of them fixed it.