Ember Cannot read property 'path' of undefined

Question

I keep hitting this error and am pretty stumped as to why. I can't trace the error in dev tools back to anything in my primary JS file. My Ember-related code is as follow:

  var App = Ember.Application.create();
  App.ApplicationRoute = Ember.Route.extend({
    model: function() {
      var url = 'http://www.json-generator.com/api/json/get/bMRERKrXfS';
      return Ember.$.getJSON(url).then(function(data) {
        model = {
          list1: data
        };
        return model;
      });
    }
  });

  Ember.Handlebars.helper('autocomplete', Ember.View.extend({
    templateName: 'controls/autocomplete',

    filteredList: function() {
      ...
      }

      return list.filter(function(item) {
        ...
      });
    }.property('list.@each', 'filter')
  }));

I have removed app-specific code from the structure there. Any time I try to run this I get the following error:

Ember Cannot read property 'path' of undefined which looks to be coming from my ember.min.js file. Any help tracking this down would be great.

Codepen Demo Link

EDIT When running this code locally and not in CodePen I end up with the following errors:

Uncaught TypeError: Cannot read property 'extend' of undefined which looks to be thrown by Ember.View.extend

and

Uncaught TypeError: Cannot read property 'isHelperFactory' of undefined which is coming from the ember.min file.

EDIT 2 I have tried updating the helper to an Ember component:

App.AutoCompleteComponent = Ember.Component.extend({
  filteredList: function() {
        var list = this.get('list'),
            filter = this.get('filter'),
            filterArr = [],
            filterArrLength;

        if (filter && filter.indexOf(', ') !== -1) {
            filterArr = filter.split(', ');
            filterArrLength = filterArr.length;
            filter = filterArr[filterArrLength - 1]
        }

        if (!filter || (filterArrLength > 0 && filterArr[filterArrLength - 1].length == 0)) {
            $("#filter-results").hide();
            INPUT.unbindKeys();
            return;
        } else {
            if (!$("#filter-results").is(":visible")) {
                INPUT.bindKeys();
                $("#filter-results").show();
            }
        }

        return list.filter(function(item) {
            if (!filterArrLength) {
                return item.title.toLowerCase().startsWith(filter);
            } else {
                return item.title.toLowerCase().startsWith(filterArr[filterArrLength - 1]);
            }
        });
    }.property('list.@each', 'filter')
});

And I have updated my Handlebars template to be "components/auto-complete"

Still, with this I am receiving the same errors. My CodePen link has also been updated for review.

andorov andorov · Accepted Answer · 2015-12-05T22:08:30

Ember.View is deprecated. See the new docs about writing helpers.

However based on the functionality described and because you are providing a template I suspect that what you want is a component:

// app/components/auto-complete.js

import Ember from 'ember';

export default Ember.Component.extend({ 
    filteredList: ...
});

The template is automatically found by Ember, in this case at templates/components/auto-complete.hbs.

Edit to your Edit 2: Note that defining objects on App is now deprecated.

Ember Cannot read property 'path' of undefined

1 Answers