Adding hasMany to a model results in "Error while processing route"

Ember Data
1

I am building an ember app talking to a JSON:API backend, but am running into an error when I define a hasMany relationship from one model (foo) to another model (bar), and then go to http://localhost:4200/#/foos/1. Note that the error occurs before any data is requested from the back end.

1814×1550 307 KB

The small demo app I created to demonstrate the problem contains only the following added/changed files on top of a plain generated ember app:

app/adapters/application.js:

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({
  host: 'http://localhost:4898'
});

app/models/bar.js:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  name: attr()
});

app/models/foo.js:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import hasMany from 'ember-data/relationships';

export default Model.extend({
  name: attr(),
  bars: hasMany('bar', {async: true})
});

app/router.js:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('foos', function() {
    this.route('foo', { path: ':foo_id' });
  });
});

export default Router;

app/routes/foos/foo.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('foo', params.foo_id)
  }
});

app/templates/foos/foo.hbs:

{{model.name}}
{{outlet}}

The error output text (to aid future searches):

Error while processing route: foos.foo (0 , _emberDataRelationships.default) is not a function TypeError: (0 , _emberDataRelationships.default) is not a function
    at Module.callback (http://localhost:4200/assets/foobar.js:213:50)
    at Module.exports (http://localhost:4200/assets/vendor.js:131:32)
    at requireModule (http://localhost:4200/assets/vendor.js:30:18)
    at Class._extractDefaultExport (http://localhost:4200/assets/vendor.js:84893:20)
    at Class.resolveOther (http://localhost:4200/assets/vendor.js:84628:32)
    at Class.superWrapper (http://localhost:4200/assets/vendor.js:33236:22)
    at Class.resolve (http://localhost:4200/assets/vendor.js:15996:35)
    at resolve (http://localhost:4200/assets/vendor.js:12571:36)
    at Object.resolve (http://localhost:4200/assets/vendor.js:12039:21)
    at Object.resolve (http://localhost:4200/assets/vendor.js:12043:55)logError @ ember.debug.js:28535error @ ember.debug.js:28478triggerEvent @ ember.debug.js:28594trigger @ ember.debug.js:53473trigger @ ember.debug.js:53287(anonymous function) @ ember.debug.js:53107tryCatch @ ember.debug.js:53806invokeCallback @ ember.debug.js:53821publish @ ember.debug.js:53789publishRejection @ ember.debug.js:53724(anonymous function) @ ember.debug.js:32054invoke @ ember.debug.js:333flush @ ember.debug.js:397flush @ ember.debug.js:205end @ ember.debug.js:560run @ ember.debug.js:682run @ ember.debug.js:21139(anonymous function) @ ember.debug.js:24797dispatch @ jquery.js:4737elemData.handle @ jquery.js:4549
TypeError: (0 , _emberDataRelationships.default) is not a function
    at Module.callback (foo.js:4)
    at Module.exports (loader.js:122)
    at requireModule (loader.js:21)
    at Class._extractDefaultExport (resolver.js:346)
    at Class.resolveOther (resolver.js:81)
    at Class.superWrapper (ember.debug.js:23110)
    at Class.resolve (ember.debug.js:5870)
    at resolve (ember.debug.js:2445)
    at Object.resolve (ember.debug.js:1913)
    at Object.resolve (ember.debug.js:1917)

In anticipation of further problems, the following are the intended backend responses:

/foos/1

{
  "data": {
    "type": "foo",
    "id": "1",
    "attributes": {
      "name": "foo1"
    },
    "relationships": {
      "bars": {
        "links": {
          "related": "/foos/1/bars"
        }
      }
    }
  }
}

/foos/1/bars

{
  "data": [
    {
      "type": "bar",
      "id": "1",
      "attributes": {
        "name": "bar1"
      }
    },
    {
      "type": "bar",
      "id": "2",
      "attributes": {
        "name": "bar2"
      }
    }
  ]
}

Any help would be greatly appreciated!

2

Sigh. The problem was that this:

import hasMany from 'ember-data/relationships';

should be this:

import { hasMany } from 'ember-data/relationships';
3

Thanks for posting your solution. It certainly saved me some time. :grinning: