Ember.js: @action decorator missing

[dev-zetta]

Hello everyone,

after upgrading ember and ember-decorators to new versions, I cannot compile my code, because there is missing export for @action decorator from ember object.

`import { action } from '@ember/object'

class MyClass extends Component {
@action
myAction() {

}
}`

It reports error ReferenceError: action is not defined.

Using ember-cli v3.10. When I remove the decorator, to make it compile, the action is not found.

Any ideas?

[rwjblue]

Most likely you are using out of date dependencies, can you ensure that you are on the latest version of ember-rfc176-data (by way of npm ls ember-rfc176-data)? Specifically, you need at least [email protected] throughout.

[dev-zetta]

Here is the output, I'm using newer version:

├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└─┬ [email protected]
  └── [email protected] 

It seems that decorators are somehow broken, not even services are being injected:
https://github.com/ember-decorators/ember-decorators/issues/444

Edit, here is a list of my ember-related dependecies:

    "ember-cli": "~3.10.1",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.7.3",
    "ember-cli-cjs-transform": "^1.3.1",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-head": "^0.4.1",
    "ember-cli-htmlbars": "^3.0.1",
    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
    "ember-cli-jsoneditor": "^0.2.0",
    "ember-cli-mirage": "1.0.0",
    "ember-cli-moment-shim": "^3.7.1",
    "ember-cli-qunit": "^4.4.0",
    "ember-cli-sass": "^10.0.1",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-uglify": "3.0.0",
    "ember-component-css": "^0.6.9",
    "ember-data": "~3.10.0",
    "ember-data-model-fragments": "^4.0.0",
    "ember-decorators": "^6.0.0",
    "ember-electron": "^2.10.0",
    "ember-engines": "0.7.1",
    "ember-fetch": "^6.5.1",
    "ember-hammertime": "^1.6.0",
    "ember-intl": "^3.5.2",
    "ember-leaflet": "^3.1.2",
    "ember-lifeline": "4.1.4",
    "ember-load-initializers": "^2.0.0",
    "ember-moment": "^7.8.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.10.0",
    "ember-toggle": "^5.3.2",

And babel:

    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.4.4",

[dev-zetta]

Edit, that service was not found after I installed flow plugin for babel. But still, even after removing the plugin, I still get error with the action decorator not found.

[dev-zetta]

@rwjblue

I did some debugging and found the source of the problem. It's quite silly :)

Here is my component's code:

import { action } from '@ember/object'

class GuiButton extends GuiWidget {
  aaaa = null

  @action
  onClick(e) {
    let action = this.get(`aaaa`) // local var
    ...
  }
}

As you can see, I used a local variable named action. Somehow it replaced the action decorator/contant.

It got compiled as:

  }), _applyDecoratedDescriptor(_class.prototype, "onClick", [action], Object.getOwnPropertyDescriptor(_class.prototype, "aaaa"), _class.prototype)), _class));
  var _default = GuiButton;
  _exports["default"] = _default;

Notice the [action]. When I rename the local variable to action2 or something else, then it gets compiled as [Ember._action].

This is code was working normally when I was using ember-decorators and the action decorator from that package.

This also means that you cannot use word "action" as variable name.

[rwjblue]

Yikes! This is surprising to me...

[bardzusny]

The above bug is still present in 3.14.1 (fresh starter app): can't use action param name in methods decorated with @action decorator.

This seems like a more general issue with class method decorators in the core package, though it may be less apparent with other ones than @action.

Consider the following example (where someComputed will be a getter function without params IRL, making it mostly theoretical):

@computed(...)
someComputed(computed) { ... } // "computed" local variable name

Will break with:

Uncaught (in promise) ReferenceError: computed is not defined

[rwjblue]

I suspect the actual bug here is in https://github.com/ember-cli/babel-plugin-ember-modules-api-polyfill, if someone has time to submit a failing test that would be super helpful.

[maxhq]

@rwjblue Any hints on where to put a test, i.e. which test to use as an example?
I tried to assemble a test directly for babel-plugin-ember-modules-api-polyfill but the tests there don't unterstand Ember's decorator syntax...