I'm testing out an upgrade of our Magento store from CE 2.3.4 to 2.4.1. One issue I have come across is this Javascript error that seems to occur on every page:
customer-data.js:178 Uncaught TypeError: Cannot read property 'remove' of undefined at customer-data.js:178 at Function._.each._.forEach (underscore.js:145) at Object.remove (customer-data.js:177) at Object.invalidate (customer-data.js:336) at (index):933 at Object.execCb (require.js:1650) at Module.check (require.js:866) at Module.<anonymous> (require.js:1113) at require.js:132 at require.js:1156
This appears to come from the following section in customer-data.js:
/** * @param {Object} sections */ remove: function (sections) { _.each(sections, function (sectionName) { storage.remove(sectionName); if (!sectionConfig.isClientSideSection(sectionName)) { storageInvalidation.set(sectionName, true); } }); }
It seems like the Javascript failure is preventing other Javascript elements on the site from executing correctly. For example, Add to Cart buttons, tabs on the detail page, account creation form, all aren't loading properly. We do use a custom in-house theme, however I switched to the stock Magento Luma theme, and the exact same issue is happening there, so it's not related to our theme.
Has anyone else seen this issue? Any ideas how to fix or work around it?
did you get any solution? I am also getting the same error
In my case it turned out that the error was caused by an out-of-date version of the WeltPixel Google Tag Manager extension, which is not installed via composer and therefore was not upgraded automatically. I downloaded and installed the latest version of the extension from their website, and the error went away.
I have The Same Issue, Any Soloution
I do the same, But error is still there..
In my case, the issue was because of the following code
<script> require([
'Magento_Customer/js/customer-data'
], function (customerData) {
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
});</script>
In a third-party module, the above code was there in the phtml template file.
To fix the issue, I have created a new js file and added the following code.
require([
'Magento_Customer/js/customer-data'
], function (customerData) {
return function () {
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
}
});
@cbdpeter wrote:In my case it turned out that the error was caused by an out-of-date version of the WeltPixel Google Tag Manager extension, which is not installed via composer and therefore was not upgraded automatically. I downloaded and installed the latest version of the extension from their website, and the error went away.
Which version did you use ? and which version fix the issue ?
Thank you !
In JavaScript almost everything is an object, null and undefined are exceptions. This error occurs when a property is read or a function is called on an undefined variable. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.
If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. To avoid getting these types of errors, you need to make sure that the variables you are trying to read do have the correct value. This can be done in various ways. You can do if checks before dealing with objects whose values are bound to change:
if (myVar !== undefined) { ... }
Or
if (typeof(myVar) !== 'undefined') { ... }