Cannot convert object to primitive value, on pressing browser back button in ember js app

Question

I am building an ember app. I have two pages. One shows list of feeds and another (which opens on click on one feed) shows details of the feed

Every thing is working fine but when i pres browser's back button from feed details page then it throws error and previous page which is feed list page doesn't load.

Here's error i am getting

Error while processing route: feed.index Cannot convert object to primitive value TypeError: Cannot convert object to primitive value
at EmptyObject.SETTER_FUNCTION [as likes] (http://192.168.59.8:4200/assets/vendor.js:36917:100)
at assign (<anonymous>)
at InternalModel.setupData (http://192.168.59.8:4200/assets/vendor.js:96156:9)
at Class._load (http://192.168.59.8:4200/assets/vendor.js:104324:21)
at Class._pushInternalModel (http://192.168.59.8:4200/assets/vendor.js:104685:32)
at Class._push (http://192.168.59.8:4200/assets/vendor.js:104625:36)
at http://192.168.59.8:4200/assets/vendor.js:105374:32
at Backburner.run (http://192.168.59.8:4200/assets/vendor.js:16233:23)
at Class._adapterRun (http://192.168.59.8:4200/assets/vendor.js:104883:31)
at http://192.168.59.8:4200/assets/vendor.js:105372:13
ember.debug.js:17631 TypeError: Cannot convert object to primitive value
at EmptyObject.SETTER_FUNCTION [as likes] (ember.debug.js:21402)
at assign (<anonymous>)
at InternalModel.setupData (internal-model.js:258)
at Class._load (store.js:1736)
at Class._pushInternalModel (store.js:2097)
at Class._push (store.js:2037)
at finders.js:166
at Backburner.run (ember.debug.js:718)
at Class._adapterRun (store.js:2295)
at finders.js:164

My feed model is below

import DS from 'ember-data';

const{attr} = DS;
export default DS.Model.extend({
      "likes": attr('number'),
      "userLiked": attr('number'),
      "commentCount": attr('number'),
      "description": attr('string'),
      "date": attr('string'),
      "tags": attr(),
      "imagePath": attr('string'),
      "link": attr('string'),
      "userId": attr('number'),
      "userName": attr('string'),
      "name": attr('string'),
      "title": attr('string'),
      "visitCount": attr('number')
});

model method of my route is as below

model(){
        var inflector = Ember.Inflector.inflector;
        inflector.irregular('feed', 'feeds.php');
        inflector.uncountable('advice');
        const authData = getAuthData();
        if(authData.loggedInUser != null){            
            return this.get('store').query('feed',{page:1,loggedInUser:authData.loggedInUser});

        }
    }

I tried debugging the code from chrome's dev tool. Everything works perfectly. But it throws error somewhere in ember-debug.js (which i assume is generated code)

Below is the method in ember-debug.js where error starts from

function MANDATORY_SETTER_FUNCTION(name) {
    function SETTER_FUNCTION(value) {
      var m = _emberMetalMeta.peekMeta(this);
      if (!m.isInitialized(this)) {
        m.writeValues(name, value);
      } else {
        _emberMetalDebug.assert('You must use Ember.set() to set the `' + name + '` property (of ' + this + ') to `' + value + '`.', false);
      }
    }

    SETTER_FUNCTION.isMandatorySetter = true;
    return SETTER_FUNCTION;
  }

Could you please help here, what i am doing wrong?

Answer 1

TL;DR: You have to generate a new ID for the feed model each time you visit the /feed page.

---

Let's say we have a page named /feed and another named /detailed .

Step 1. First we are on the page /feed and the Ember application retrieves the data with Ember data. We retrieve the feed model and we store it with the ID given by the backend service: "feed-01".

Step 2. Next we go to the page /detailed and the Ember application retrieves the feed detail with Ember data and store the model with the ID given by the backend service: "feed-detail-01".

From there, everything works fine.

Step 3. But when we go back to the previous page /feed the Ember application retrieves the feed model and store it with the ID given "feed-01" but the ID is the same as the Step 1. This is why Ember throws an error.

So your backend service have to generate a new ID each time we retrieve the feed model from the /feed page.