Uncaught ReferenceError: item is not defined

[ysvahn]

This issue is for the following packages:

[x] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-devdocs
[ ] upward-js
[ ] upward-spec

This issue is a:

[x] Bug
[ ] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

Question	Answer
Magento version	2.3
Operating System + version	Debian 8.11
node.js version (node -v)	9.10.1
npm version (npm -v)	6.4.1

Description

Fresh install PWA starts rendering then crashes after a Javascript error.
I cannot backtrack the issue because the code is bundled and minified.

The server is in production mode (npm run build && npm run stage:venia command)

Here is the complete console log :

CATALOG/GET_ALL_CATEGORIES/REQUEST
CART/GET_DETAILS/REQUEST
CHECKOUT/RESET
CART/GET_GUEST_CART/REQUEST
CATALOG/GET_ALL_CATEGORIES/RECEIVE
CART/GET_GUEST_CART/RECEIVE
CART/GET_DETAILS/REQUEST

Uncaught ReferenceError: item is not defined

at categoryTile_CategoryTile.get previewImage [as previewImage] (RootCmp_CMS_PAGE__default-855e82255fe67c4ce849.js:14)

at categoryTile_CategoryTile.render (RootCmp_CMS_PAGE__default-855e82255fe67c4ce849.js:14)

at vg (vendor.js:624)

at ug (vendor.js:620)

at zg (vendor.js:666)

at gh (vendor.js:891)

at hh (vendor.js:896)

at Kh (vendor.js:949)

at Lh (vendor.js:946)

at oh (vendor.js:934)`

CART/GET_DETAILS/RECEIVE

The logs above are in development mode on my local machine, but same exact error.

The Venia sample data is correctly installed and the database is populated.

Am I missing something in the configuration ?

Expected result:

PWA should render the homepage without error.

[rvr31]

@Kroonax how did you solve this? Also having this issue.

[ysvahn]

How unpolite from me.

There was a (I guess ?) mistake in the components/CategoryList/categoryTile.js

Line 35

get previewImage() {
        const { image, productImagePreview } = this.props.item;
        const previewProduct = productImagePreview.items[0];
        if (image) {
            return makeCategoryMediaPath(item.image); // <= Here
        } else if (previewProduct) {
            return makeProductMediaPath(previewProduct.small_image);
        }
    }

Should be (I believe) :

get previewImage() {
        const { image, productImagePreview } = this.props.item;
        const previewProduct = productImagePreview.items[0];
        if (image) {
            return makeCategoryMediaPath(image); // <= item does not exist, should be `this.props.item.image` or `image`
        } else if (previewProduct) {
            return makeProductMediaPath(previewProduct.small_image);
        }
    }