Sean
Sean

Reputation: 31

How to resolve Ember deprecation: "Use defineProperty to define computed properties"

While attempting to update an Ember application to Ember 3.6 (currently on the 3.4 LTS), I have come across several instances of the following deprecation.

https://deprecations-app-prod.herokuapp.com/deprecations/v3.x/#toc_ember-meta-descriptor-on-object

Use defineProperty to define computed properties

until: 3.5.0

id: ember-meta.descriptor-on-object

Although uncommon, it is possible to assign computed properties directly to objects and have them be implicitly computed from eg Ember.get. As part of supporting ES5 getter computed properties, assigning computed properties directly is deprecated. You should replace these assignments with calls to defineProperty.

These deprecations display in the browser console as:

DEPRECATION: [DEPRECATED] computed property 'session' was not set on object '<app@component:component1::ember439>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

DEPRECATION: [DEPRECATED] computed property 'gStories' was not set on object '<app@component:component2::ember427>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

component1:

HBS:

<div>
  {{#if session.isAuthenticated}}
    <h2>Signed in</h2>
  {{else}}
    <h2>Sign Up</h2>
    {{signup-dialog}}
  {{/if}}
</div>

JS:

The session service is from ember-simple-auth: http://ember-simple-auth.com/api/classes/SessionService.html

import Component from '@ember/component';
import { service } from 'ember-decorators/service';

export default class Component1 extends Component {
  @service('session') session;
}

component2:

HBS:

{{#if gStories}}
  <h2>
    Stories
  </h2>

  {{#each gStories as |story|}}
    {{story-component story=story}}
  {{/each}}
{{/if}}

JS:

import Component from '@ember/component';
import { computed } from 'ember-decorators/object';
import { argument } from '@ember-decorators/argument';

export default class Component2 extends Component {
  constructor() {
    super(...arguments);
  }

  @argument
  stories = null;

  @computed('stories')
  get gStories() {
    let stories = this.get('stories');
    let gStories = [];
    stories.forEach((story) => {
      "use strict";

      if (story.get('type') === 'g') {
        gStories.pushObject(story);
      }
    });

    return gStories;
  }
}

I'm hoping that someone can show me how to resolve the two cases above in which I can clean up the remainder of my application. Perhaps there is a better coding practice that I should be using instead as the deprecation states "Although uncommon".

Any additional background information on this deprecation would be appreciated.

Thanks in advance!


Update:

It was brought to my attention that it was perhaps @ember-decorators causing the issue. I found it an easier path to remove them from the examples in question and see if those deprecations were no longer thrown.

component1:

HBS:

<div>
  {{#if session.isAuthenticated}}
    <h2>Signed in</h2>
  {{else}}
    <h2>Sign Up</h2>
    {{signup-dialog}}
  {{/if}}
</div>

JS:

The session service is from ember-simple-auth: http://ember-simple-auth.com/api/classes/SessionService.html

import Component from '@ember/component';
import {inject as service} from '@ember/service';

export default Component.extend({
  session: service('session'),
});

component2:

HBS:

{{#if gStories}}
  <h2>
    Stories
  </h2>

  {{#each gStories as |story|}}
    {{story-component story=story}}
  {{/each}}
{{/if}}

JS:

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  stories: null,

  gStories: computed('stories', function() {
    let stories = this.get('stories');
    let gStories = [];
    stories.forEach((story) => {
      "use strict";

      if (story.get('type') === 'g') {
        gStories.pushObject(story);
      }
    });

    return gStories;
  })
});

The good news is that resolved the deprecation for component2. The bad news is it did not for component1.

Deprecation on session remains:

DEPRECATION: [DEPRECATED] computed property 'session' was not set on object '<app@component:component1::ember439>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

Thoughts?

Upvotes: 3

Views: 927

Answers (1)

Sean
Sean

Reputation: 31

@ember-decorators was the culprit since removing the references to @ember-decorators cleared up the deprecation warning. The underlying implementation of @ember-decorators (at least older versions - 1.3.4 in this case) must be using computed properties.

Upvotes: 0

Related Questions