magento2: JS error in the customer data

Originally this issue was reported in https://github.com/magento/magento2/commit/5983e1733d56b1b2f15fb4f0e64094a3a4f3145d#commitcomment-44080850 by @HenKun.

The following commit https://github.com/magento/magento2/commit/5983e1733d56b1b2f15fb4f0e64094a3a4f3145d leads to similar issues described in https://github.com/magento/magento2/pull/24847.

Preconditions (*)

Magento 2.4.1, or 2.4-develop

Steps to reproduce (*)

Add the following code to the page on frontend:

<script>
    require(['Magento_Customer/js/customer-data'], function (customerData) {
        console.log(customerData.getExpiredSectionNames());
    });
</script>

Go to the frontend, see the console

Expected result (*)

In the console you should see an empty array, like this:

Actual result (*)

in the console we see the following error:

Additional info from Engcom

Add the script to, for example, /app/code/Magento/Customer/view/frontend/templates/form/edit.phtml script

In the Storefront, Sign In as a Customer
Go to My Account
Click Edit under Contact Information
Observe the dev console

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

Severity: S0 - Affects critical data or functionality and leaves users without workaround.
Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 20 (10 by maintainers)

Commits related to this issue

MC-36096: [Cloud] Local cache storage is not retained for the expected period. — committed to magento/magento2 by tsviklinskyi 4 years ago
Merged PR 29368: Remove invalidate function to skip js error ## What's being changed We're removing the `invalidate` call prior to refreshing the section in the stored customerData, in our chatData.... — committed to dotmailer/dotmailer-magento2-extension-chat by sertlab 3 years ago
cookie expiration date is not updated after Cookie Lifetime is changed — committed to magento/magento2 by glo05363 3 years ago

Most upvoted comments

@gkopec The fix for this issue was accidentally removed in magento 2.4.4 and 2.4.5. I’ve created a pull request for that: https://github.com/magento/magento2/pull/36177

You can use this patch for 2.4.5: https://github.com/magento/magento2/commit/847c7997143d3c90b26f94480a9fe202f499faf7.diff

TuVanDev on Oct 18, 2022

Hi @ihor-sviziev. Thank you for your report. The issue has been fixed in #31940 by @ihor-sviziev in 2.4-develop branch Related commit(s):

240253770cf2c41430d494c17730fe6484cbc18f

43ed528974031bf41e8cf94b51566b8e1feb24a5

8ae5bf9b6a1816e1236d2706c043e98cac469a3c

The fix will be available with the upcoming 2.4.3 release.

@gabrieldagama The fix didn’t merge into 2.4.3 yet, so it does not available in 2.4.3

TuVanDev on Sep 7, 2021

After this was fixed, the fix was removed by this commit: https://github.com/magento/magento2/commit/405ee6ebdfb9a3df7455153eb11af2f91fdba562

So in version 2.4.5 the bug is back again… 🤦🏻‍♂️

pkarsai on Sep 21, 2022

up, 2.4.x-develop seems to still produce the error (tested with firefox).

kanevbg on Aug 24, 2023

Re-opened since it was reverted. https://github.com/magento/magento2/issues/31920#issuecomment-1253711103

ihor-sviziev on Oct 18, 2022

@gkopec, I created this from the PR:

index 213aa105b..6bff87d67 100644
--- a/vendor/magento/module-customer/view/frontend/web/js/customer-data.js
+++ b/vendor/magento/module-customer/view/frontend/web/js/customer-data.js
@@ -17,7 +17,9 @@ define([
 ], function ($, _, ko, sectionConfig, url) {
     'use strict';
 
-    var options = {},
+    var options = {
+            cookieLifeTime: 86400 //1 day by default
+        },
         storage,
         storageInvalidation,
         invalidateCacheBySessionTimeOut,
@@ -30,6 +32,22 @@ define([
     url.setBaseUrl(window.BASE_URL);
     options.sectionLoadUrl = url.build('customer/section/load');
 
+    /**
+     * Storage initialization
+     */
+    function initStorage() {
+        $.cookieStorage.setConf({
+            path: '/',
+            expires: new Date(Date.now() + parseInt(options.cookieLifeTime, 10) * 1000),
+            samesite: 'lax'
+        });
+        storage = $.initNamespaceStorage('mage-cache-storage').localStorage;
+        storageInvalidation = $.initNamespaceStorage('mage-cache-storage-section-invalidation').localStorage;
+    }
+
+    // Initialize storage with default parameters to prevent JS errors while component still not initialized
+    initStorage();
+
     /**
      * @param {Object} invalidateOptions
      */
@@ -217,14 +235,7 @@ define([
         /**
          * Storage init
          */
-        initStorage: function () {
-            $.cookieStorage.setConf({
-                path: '/',
-                expires: new Date(Date.now() + parseInt(options.cookieLifeTime, 10) * 1000)
-            });
-            storage = $.initNamespaceStorage('mage-cache-storage').localStorage;
-            storageInvalidation = $.initNamespaceStorage('mage-cache-storage-section-invalidation').localStorage;
-        },
+        initStorage: initStorage,
 
         /**
          * Retrieve the list of sections that has expired since last page reload.
@@ -389,7 +400,10 @@ define([
          */
         'Magento_Customer/js/customer-data': function (settings) {
             options = settings;
+
+            // re-init storage with a new settings
             customerData.initStorage();
+
             invalidateCacheBySessionTimeOut(settings);
             invalidateCacheByCloseCookieSession();
             customerData.init();

pkarsai on Oct 18, 2022

@ihor-sviziev yep I see it.

Thanks

pusachev on Feb 10, 2021