Cannot read property 'storeId' of undefined

andy1122 · February 10, 2021, 4:47pm

Hi there,

I have configured the magento 2 integration with Vue Storefront and when starting the server I get this error:
Error during render : /error
TypeError: Cannot read property ‘storeId’ of undefined
at buildBaseStoreView (core/lib/multistore.ts:45:117)
at currentStoreView (core/lib/multistore.ts:59:59)
at _prepareCacheStorage (core/lib/storage-manager.ts:8:36)
at Object.init (core/lib/storage-manager.ts:31:38)
at Module…/core/modules/url/index.ts (core/modules/url/index.ts:6:43)
at webpack_require (webpack/bootstrap:25:0)
at Module…/src/modules/client.ts (src/modules/client.ts:2:0)
at webpack_require (webpack/bootstrap:25:0)
at Module…/core/modules-entry.ts (server-bundle.js:5861:76)
at webpack_require (webpack/bootstrap:25:0)

It is a multistore and the configuration for Storeviews is:
“storeViews”: {
“multistore”: true,
“commonCache”: false,
“mapStoreUrlsFor”: [
“en”,
“es”,
“nl”
],
“en”: {
“storeCode”: “default”,
“storeId”: 1,
“name”: “Default”,
“url”: “”,
“appendStoreCode”: false,
“elasticsearch”: {
“host”: “/api/catalog”,
“index”: “vue_storefront_catalog”
},
“tax”: {
“sourcePriceIncludesTax”: false,
“defaultCountry”: “ES”,
“defaultRegion”: “”,
“calculateServerSide”: true
},
“i18n”: {
“fullCountryName”: “United States”,
“fullLanguageName”: “English”,
“defaultLanguage”: “EN”,
“defaultCountry”: “US”,
“defaultLocale”: “en-US”,
“currencyCode”: “EUR”,
“currencySign”: “EUR”,
“dateFormat”: “HH:mm D-M-YYYY”
}
},
“es”: {
“storeCode”: “es”,
“storeId”: 4,
“name”: “ES”,
“url”: “/es”,
“appendStoreCode”: true,
“elasticsearch”: {
“host”: “/api/catalog”,
“index”: “vue_storefront_catalog_es”
},
“tax”: {
“sourcePriceIncludesTax”: false,
“defaultCountry”: “ES”,
“defaultRegion”: “”,
“calculateServerSide”: true
},
“i18n”: {
“fullCountryName”: “Spain”,
“fullLanguageName”: “Spanish”,
“defaultLanguage”: “ES”,
“defaultCountry”: “ES”,
“defaultLocale”: “es-ES”,
“currencyCode”: “EUR”,
“currencySign”: “EUR”,
“dateFormat”: “HH:mm D-M-YYYY”
}
},
“nl”: {
“storeCode”: “nl”,
“storeId”: 3,
“name”: “NL”,
“url”: “/nl”,
“appendStoreCode”: true,
“elasticsearch”: {
“host”: “/api/catalog”,
“index”: “vue_storefront_catalog_nl”
},
“tax”: {
“sourcePriceIncludesTax”: false,
“defaultCountry”: “NL”,
“defaultRegion”: “”,
“calculateServerSide”: true
},
“i18n”: {
“fullCountryName”: “Netherlands”,
“fullLanguageName”: “Dutch”,
“defaultCountry”: “NL”,
“defaultLanguage”: “NL”,
“defaultLocale”: “nl-NL”,
“currencyCode”: “EUR”,
“currencySign”: “EUR”,
“dateFormat”: “HH:mm D-M-YYYY”
},
I hope you can help. Thank you!

Fifciuu · February 16, 2021, 11:10am

Hello.
Look at the line from error:

storeId: config.defaultStoreCode && config.defaultStoreCode !== '' ? config.storeViews[config.defaultStoreCode].storeId : 1,

It looks like you provided not existing storeCode in defaultStoreCode

andy1122 · February 22, 2021, 11:55am

I have managed to fix it, but now I get another error. I can see the VS front-end but it is not connected to Magento2 properly.

When I run npm run dev on vue-storefront I get this error:

 [module] VS Modules registration finished. { succesfulyRegistered: '0 / 0', registrationOrder: [] }
Calling asyncData in Home Page (core) null
Entity cache is enabled for productList null
Result from ES for ... (attribute),  ms=1788 null
Result from ES for ... (product),  ms=1855 null
Result from ES for ... (taxrule),  ms=53 null
Top-most asyncData executed null
Result from ES for ... (category),  ms=102 null

Elastic search settings:
“elasticsearch”: {
“host”: “localhost”,
“index”: “vue_storefront_catalog”,
“port”: 9200,
“protocol”: “http”,
“requestTimeout”: 5000,
“min_score”: 0.01,
“indices”: [
“vue_storefront_catalog”,
“vue_storefront_catalog_en”,
“vue_storefront_catalog_es”,
“vue_storefront_catalog_nl”

Elastic search version
“version” : {
“number” : “7.10.0”

In Magento 2 in the configuration of Vue Storefront I chose ES version: ElasticSearch 6+

I have checked many times the settings in Magento 2, vue-storefront, vue-storefront-api and mage2vs, the index and indices seem to be fine, I do not know what to do. Any idea?

Fifciuu · February 22, 2021, 3:31pm

Hello @andy1122,
at first. Please share the solution with the community. One day someone will have the same problem and will find this thread.

About the rest, you should not use mage2vs, use magento2-vsbridge-indexer - only this one supports ES7. Structure of Elasticsearch looks different for this version. So make sure to:

Purge your ES
Configure magento2-vsbridge-indexer
Make full reindex

andy1122 · February 25, 2021, 6:49pm

Thank you @Fifciuu. For the previous issue it seems that my multi-store configuration was wrong, so I recreated the storeViews in Magento and changed the local.json settings and it worked.

andy1122 · March 3, 2021, 8:16pm

Hi @Fifciuu,
I have done these 3 steps:

Purge your ES
Configure magento2-vsbridge-indexer
Make full reindex

but categories and products are not being loaded to my frontend. I can see they have been imported to ES using yarn mage2vs import in Vue Storefront API.

Elastic search is up and running:
{
“name” : “Andreeas-MBP.home”,
“cluster_name” : “elasticsearch_andy”,
“cluster_uuid” : “XeUmJADsTz-9oP2Y98WgWQ”,
“version” : {
“number” : “7.10.0”,
“build_flavor” : “default”,
“build_type” : “tar”,
“build_hash” : “51e9d6f22758d0374a0f3f5c6e8f3a7997850f96”,
“build_date” : “2020-11-09T21:30:33.964949Z”,
“build_snapshot” : false,
“lucene_version” : “8.7.0”,
“minimum_wire_compatibility_version” : “6.8.0”,
“minimum_index_compatibility_version” : “6.0.0-beta1”
},
“tagline” : “You Know, for Search”
}

But in VSF-API I get an error:

curl -i http://elastic:changeme@localhost:8080/api/catalog/vue_storefront_catalog/_search

vue_storefront_catalog/_searche@localhost:8080/api/catalog/ 
HTTP/1.1 500 Internal Server Error
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Link
Content-Type: application/json; charset=utf-8
Content-Length: 78
ETag: W/"4e-AdAHGh5NtU4MHDrFBBy5Vm5itgI"
Date: Wed, 03 Mar 2021 20:06:25 GMT
Connection: keep-alive

{"code":500,"result":"getaddrinfo ENOTFOUND elasticsearch elasticsearch:9200"}

This is the confirguration from the Magento Indexer:

Enable VS Bridge: Yes

ES Version: Elasticsearch6+
List of stores to reindex: Default Dutch Store Spanish Store

Elasticsearch Client

Elasticsearch host	
localhost
Elasticsearch port number	
9200
Use HTTPS	
No

Enable basic HTTP authentication	
No
Enable this option when your Elasticsearch server use basic HTTP authentication.

Indices Settings

Batch Indexing Size	
1000
Index Alias Prefix	
vue_storefront_catalog

Index Identifier:  Store Code

Add Index Identifier to Default Store View	
No
The maximum number of fields in an index	
1000

Redis Cache Settings

Clear cache	
Yes
Invalidate entity batch size	
0
Set "0" to avoid batch processing

Vsf base Url	
http://localhost:3000/
with "/" in the end

Invalidate Secret cache key	
aeSu7aip
Please note that Key should be equal vue-storefront/config/local.json value of server.invalidateCacheKey

Connection timeout	
10
in seconds

Optimization Settings

Check cluster health	
No
Set yes if you want to check before sending operation to update if status is green

Check max bulk queue	
No
Set yes if you want to check before sending operation to update if pending tasks + batch indexer size are lower than max bulk queue size master node

Change number of replicas	
Yes
Set yes if you want to set number_of_replicas=0 during indexing

Default number of replicas	
1
It's value which is set after indexing

Change refresh interval	
Yes
Set yes if you want to set refresh_interval=-1 during indexing

Default value of refresh interval	
1
It's value which is set after indexing. Enter a value in seconds

Catalog Settings

Use Catalog Url Keys	
No
Use Magento Url Key attribute for url_key and slug field (for products and categories). Url Keys have to be unique. IF you select "Yes" slug will be generated base on Magento url_key attribute.

Use Magento Url Key and ID to generate slug for VSF	
No
By default slug (and url_key) is generated base on product/category NAME and ID.

Sync Tier Prices	
No
Add Parent Data	
No
Configurable Children Batch Size	
500
Set Batch Size for processing configurable children. For big numbers of configurable children we have to load attributes, prices, media gallery in smaller batches.

Vue Storefront local.json configuration:

             "api": {
                "url": "http://localhost:8080",
                "saveBandwidthOverCache": true
              },
              "elasticsearch": {
                "httpAuth": "",
                "host": "/api/catalog",
                "index": "vue_storefront_catalog",
                "min_score": 0.02,
                "csrTimeout": 5000,
                "ssrTimeout": 1000,
                "queryMethod": "GET",
                "disablePersistentQueriesCache": true,
                "searchScoring": {
                  "attributes": {
                    "attribute_code": {
                      "scoreValues": {
                        "attribute_value": {
                          "weight": 1
                        }
                      }
                    }
            "defaultStoreCode": "",
              "storeViews": {
                "multistore": true,    
                "commonCache": false,
                "mapStoreUrlsFor": [
                  "es",
                  "nl"

Vue Storefront API config:
“elasticsearch”: {
“host”: “localhost”,
“index”: “vue_storefront_catalog”,
“port”: 9200,
“protocol”: “http”,
“requestTimeout”: 5000,
“min_score”: 0.01,
“indices”: [
“vue_storefront_catalog”,
“vue_storefront_catalog_es”,
“vue_storefront_catalog_nl”
],

"availableStores": [
    "es",
    "nl"
  ],
  "msi": {
    "enabled": false,
    "defaultStockId": 1
  },
  "storeViews": {
    "multistore": true,
    "mapStoreUrlsFor": [
      "es",
      "nl"
    ]

"magento2": {
    "imgUrl": "http://localhost/magento2/media/catalog/product",
    "assetPath": "/../var/magento2-sample-data/pub/media",
    "api": {
      "url": "http://localhost/magento2/index.php/rest/",
      ...

I hope you can help. Thank you.

Fifciuu · March 5, 2021, 8:52am

{"code":500,"result":"getaddrinfo ENOTFOUND elasticsearch elasticsearch:9200"}

It simply means your VSF-API tries to connect to Elasticsearch via elasticsearch:9200 but it is unreachable. This address might look a bit weird - it is address of docker container with ES - it should be resolved by docker’s internal DNS for containers in the same network.

Possible reasons - Your VSF-API is not a docker container or is not in the same network