Cannot read property 'forEach' of undefined

[jrdn91]

I am attempting to use this inside a component that is being rendered inside an each loop

// ITEMS ROUTE
{{#each model key="id" as |item|}}
    {{event-item item=item}}
{{/each}}

// EVENT-ITEM COMPONENT
{{#link-to "item" item}}
    {{lazy-image url='https://s3.amazonaws.com/bidr-uploads/item-images/{{localStorage.user.active_auction}}/{{cropped-image item.item_image}}' class="item-image" alt="{{item.item_name}}"}}
    ...
{{/link-to}}

Any idea as to what is happening here?

[fsmanuel]

@Jordan4jc what version of ember and what version of ember-lazy-image are you using?

[jrdn91]

Ember 2.2.1 *Just upgraded due to security vulnerability
Ember-Lazy_image 0.0.14

[danDanV1]

I just installed for the first time as well. Latest versions. "ember-cli": "1.13.13" "ember-lazy-image": "0.0.14" "ember": "~2.2.0".

DEPRECATION: The initialize method for Application initializer 'viewport-config' should take only one argument - App, an instance of an Application. [deprecation id: ember-application.app-initializer-initialize-arguments] See http://emberjs.com/deprecations/v2.x/#toc_initializer-arity for more details.
at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16331:7)
at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:16241:12)
at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16331:7)
at invoke (http://localhost:4200/assets/vendor.js:16347:7)
at deprecate (http://localhost:4200/assets/vendor.js:16300:32)
at Object.deprecate (http://localhost:4200/assets/vendor.js:26196:37)
at http://localhost:4200/assets/vendor.js:15011:28
at http://localhost:4200/assets/vendor.js:15048:9
at Object.visit as default

in-viewport.js:21 Uncaught TypeError: Cannot read property 'forEach' of undefined

Using lazy load in a foreach loop inside component. Loop worked fine before converting to lazy load.:
{{#each artist.images as |image|}}
{{lazy-image class="ui centered medium bordered image" url="{{imagePath}}/{{image.filename}}"}}
{{/each}}

[danDanV1]

in-viewport.js:21 is: var forEach = _ember['default'].EnumerableUtils.forEach;

[danDanV1]

SOLUTION: I pulled the latest commit from the repo. It threw a much better error:
%7B%7Bimage.filename%7D%7D:1 GET http://localhost:4200/%7B%7BimagePath%7D%7D/%7B%7Bimage.filename%7D%7D 404 (Not Found)

Which shows the problem was wrong image url using handlebars.

this is what I had been using prior to lazy-image:
<img class="ui centered medium bordered image" src="{{imagePath}}/{{image.filename}}">

Didn't work as:
{{lazy-image class="ui centered medium bordered image" url="{{imagePath}}/{{image.filename}}"}}

so changed to
{{lazy-image class="ui centered medium bordered image" url=(concat imagePath "/" image.filename)}}

done! @Jordan4jc should fix your problem too.

[jrdn91]

still doesn't solve my problem, even if I put a static url in as the url param it still gives me the same error.

[Rastopyr]

+1
in Ember.js deprecated EnumerableUtils. need backward compability

i.e. this is bug in ember-in-viewport

[Rastopyr]

@twokul please, update addon in npm

[Rastopyr]

@Jordan4jc you can try add ember addon directly from github. this should solve you problem

    "ember-lazy-image": "https://github.com/twokul/ember-lazy-image.git",

[jrdn91]

I will give this a shot later and see how it fairs