[Bug]: Error while getting products without assets

[KeetTechSol]

Expected Behavior

If any product does not have assets, it should still be displayed without an image or with a placeholder image.

Actual Behavior

Now throwing a runtime error and the entire category page is not displayed.

TypeError: Cannot read properties of null (reading 'sort')
at Object.getAgnosticSearchResult (facetGetters.ts?f8dc:129:1)
at VueComponent.eval (VM17945 Category.vue:439:84)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597:1)
at RefImpl.computedGetter [as value] (vue-composition-api.esm.js?a6f4:1093:1)
at VueComponent.eval (VM17945 Category.vue:451:120)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597:1)
at RefImpl.computedGetter [as value] (vue-composition-api.esm.js?a6f4:1093:1)
at VueComponent.eval (VM17945 Category.vue:454:56)

Error in product page

TypeError: Cannot read properties of null (reading 'preview')
at eval (RelatedProducts.vue?0c37:32:1)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2646:1)
at Proxy.render (RelatedProducts.vue?0c37:24:1)
at eval (vue-composition-api.esm.js?a6f4:1425:1)
at activateCurrentInstance (vue-composition-api.esm.js?a6f4:1385:1)
at Proxy.$options.render (vue-composition-api.esm.js?a6f4:1425:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4070:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.run (vue.runtime.esm.js?2b0e:4570:1)

Possible Solution

No response

Steps to reproduce

1. Add a product without an image in Vendure.
2. Start Storefront
3. Navigate to the category page which contains that product

What version of vendure integration are you using?

1.1.0

What version of Node.js are you using?

16.10.0

What browser (and version) are you using?

Chrome Version 98.0.4758.109

What operating system (and version) are you using?

macOS v12.2.1

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[ymaheshwari1]

I'm interested in working on this.

[KeetTechSol]

Below are the codes where the null check is to be implemented.
packages/composables/src/getters/facetGetters.ts line 66
packages/theme/components/RelatedProducts.vue line 11
vuestorefront-community/template-vendure/components/RelatedProducts.vue line 11

[Baroshem]

@ymaheshwari1

Sure, I will assign it to you. Thanks! If you need any assistance, let me know :)

[ymaheshwari1]

@Baroshem Do we have a default thumbnail to be displayed when we are not getting a product image?

[Baroshem]

@ymaheshwari1

I think Storefront UI provides that. @justyna-13 @AdamPawlinski could you please confirm?

[justyna-13]

That's right. It looks like that

[ymaheshwari1]

That's right. It looks like that

Ok Thanks

[ymaheshwari1]

Hi,
Debugged this and found that the placeholder is actually displayed but the height for it gets set in px, that's why it's too small.
Found that from somewhere the img tag gets style being applied.

but in devtools, the height for the tag is displayed correct