[ERROR] Failed to load the "Magento_Checkout/js/view/form/element/email" component

[maile-it-solutions]

Preconditions and environment

• Magento version = 2.4.6-p3
  Sometimes when you go to /checkout the E-Mail does not load

Steps to reproduce

1. Add a product to the cart
   2 Go to /checkout

-> Sometimes the E-Mail field is not loading and no checkout is possible.

Expected result

E-Mail field is visible

Actual result

Sometimes Error from title is thrown and E-Mail field is not visible

Additional information

No response

Release note

No response

Triage and priority

• 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”.

[m2-assistant]

Hi @maile-it-solutions. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant]

Hi @engcom-Bravo. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-Bravo]

Hi @maile-it-solutions,

Thank you for reporting and collaboration.

Verified the issue on Magento 2.4-develop instance and the issue is not reproducible.Kindly refer the attached video,

Steps to reproduce

• Add a product to the cart
• Go to /checkout

Screencast.from.13-12-23.11.54.37.AM.IST.webm

Kindly recheck the behaviour on Magento 2.4-develop instance and elaborate steps to reproduce if the issue is still reproducible and check any third party modules causing the issue.

Thanks.

[engcom-Bravo]

Hi @maile-it-solutions,

Kindly provide latest update on this comment #38274 (comment) still you are working on this issue if you are able to reproduce the issue please elaborate the steps to reproduce.Please let us know still if you are facing any issue.

Thanks.

[engcom-Bravo]

Hi @maile-it-solutions,

We have noticed that this issue has not been updated since long time.
Hence we assume that this issue is fixed now, so we are closing it. Please feel to raise a fresh ticket or reopen this ticket if you need more assistance on this.

Thanks.

[PeteBED]

@maile-it-solutions did you find any solution for this? Seeing the same with no stack trace or debugging information beyond the single line from the issue title.

We were able to replicate by doing the following:

1. In a private browsing window visit the site.
2. Without interacting in any other way add a product to the basket (we used homepage products, but direct to product page does the same)
3. Go directly to checkout via the minicart checkout button

Result: No email field is present and the first checkout step cannot be completed.

Instead of step 3 going to the cart page first and then on to the checkout does not produce the error. It appears that the quote is not fully created or available unless the user has interacted with the basket, but the root cause is still not evident.

Edit to say we're seeing it on 2.4.4 and 2.4.5

[mjvermeltfoort]

@maile-it-solutions can you re-open this issue? We're experiencing the same problem

[maile-it-solutions]

@PeteBED @mjvermeltfoort
Unfortunately, I have not found a reliable solution for this yet. It happens mostly when you are using a completely fresh browser that has not visited the shop for a while. However, I cannot get the same error twice by removing browser data.

So, at the moment, I do not know why the UI component for the e-mail sometimes fails to load.
Did anybody find out more?

[PeteBED]

@maile-it-solutions are you able to reopen the issue?

[maile-it-solutions]

@PeteBED no I just opened up a new one #38385

[andrewbess]

Hello @maile-it-solutions
Thank you for your contribution
I think it would be better to reopen this issue instead of creating new one, because this issue already has more information.
I'll reopen this issue and close #38385 as duplicated

[SamJUK]

+1 on this issue, bit more information on reliably reproducing the issue in our environments at least. Its vital there is no left over data from previous site visits.

• Opening a incognito browser
• Visit a product page, in devtools clear all (Cookies, Session and local storage).
• Refresh then add product to cart
• Navigate directly to checkout and have the missing email field.

---

As for the field not loading, debugging the generic requirejs component failed to load error. It appears to be masking the following error & stack trace.

TypeError: Cannot read properties of undefined (reading 'set')
    at bundle-common.min.js:1:630989
    at Function.vt (bundle-common.min.js:1:105650)
    at Object.update (bundle-common.min.js:1:630946)
    at Object.set (bundle-common.min.js:1:632446)
    at i (bundle-checkout.min.js:1:74172)
    at n (bundle-checkout.min.js:1:74369)
    at Object.getValidatedEmailValue (bundle-checkout.min.js:1:75941)
    at bundle-checkout.min.js:1:251824
    at Object.execCb (0c0b2c408d56c0f85cdb3e42f36c3bdc.min.js:117:195)
    at i.execCb (bundle-common.min.js:1:720177)
...

Interesting Methods along with their source code

• Object.getValidatedEmailValue - Source Code
• Object.set - Source Code
• Object.update - Source Code

Its looking to be potentially a race condition where the email field is trying to save data into the local storage cache before its been initialised properly.
A breakpoint on line 177 of customer-data.js (storage.set within the buffer update method) is showing the storage object as being undefined when run for the email field. Although it runs multiple times afterwards and storage is defined then.

[SamJUK]

A bit more digging reveals this bug was first noticed in 2020 in a commit against the following commit 5983e17

With the following issue being created for it #31920
Looks like it was fixed, then reverted, then fixed again in upcoming 2.4.7?

Anyway looks to be a potential patch for it in the above linked issue #31920 (comment)

[maile-it-solutions]

@SamJUK, thanks a lot! That made my day.

@andrewbess @engcom-Bravo
I could re-produce the bug like that

Opening a incognito browser
Visit a product page, in devtools clear all (Cookies, Session and local storage).
Refresh then add product to cart
Navigate directly to checkout and have the missing email field.

and after applying the patch https://github.com/magento/magento2/commit/847c7997143d3c90b26f94480a9fe202f499faf7.diff it is gone

[engcom-Bravo]

Hi @maile-it-solutions,

Thanks for your update.

Verified the issue on Magento 2.4-develop instance and the issue is not reproducible.Kindly refer the attached video.

Steps to reproduce :

• Opening a incognito browser
• Visit a product page, in devtools clear all (Cookies, Session and local storage).
• Refresh then add product to cart
• Navigate directly to checkout and have the missing email field.

Screencast.from.29-01-24.12.40.27.PM.IST.webm

We are able to see the email field in checout.

Kindly recheck the issue in Magento 2.4-develop instance and please let us know if we are missing anything.

Thanks.

[maile-it-solutions]

Hi @engcom-Bravo,
can you go in you browser to App and Clear all website data there, before refreshing the page. In the video it looks like you are just clearing your browser network protocol

[engcom-Bravo]

@magento give me 2.4-develop instance

[magento-deployment-service]

Hi @engcom-Bravo. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Bravo, here is your Magento Instance: https://8630b86106fc53ae693272e727b6ac29.instances-prod.magento-community.engineering
Admin access: https://8630b86106fc53ae693272e727b6ac29.instances-prod.magento-community.engineering/admin_20af
Login: 0a73385a
Password: c2e64133aee9

[engcom-Bravo]

Hi @maile-it-solutions,

Thanks for your update.

We have Cleared all website data before refreshing the page and the issue is still not reproducible.

Email field is still visible.

Could you please check the issue in Latest Magento 2.4 -develop instance and elaborate the steps if the issue is still reproducible.

Thanks.

[maile-it-solutions]

Fine for me the code from @SamJUK solved my issue @mjvermeltfoort @PeteBED feel free to respond here, otherwise I will close the issue

[PeteBED]

Patch worked here too

[kestraly]

+1 to this issue. Patch looks to have resolved the issue.

[andy-aware]

We've noticed that on 2.4.6 and 2.4.7 latest patches this is still an issue.

We've tried: #33593 - still in testing

Does anyone have a confirmed way to replicate the email not showing up, as it is so sporadic.

[AndresInSpace]

33593 should address the mixin and allow customerData mixin to properly apply before rest js runs.
Storage prop is not initiated until customerData.initStorage is ran which appears how they patched this. However, the customerData mixin is responsible for instantiating storage and replacing get expired sections method.

I believe the suggested fixes here needs to be reverted, apply 33593 patches(from the actual patch, 4 files).
You may need to change where in layout the customerData config options output (in data mage init script near bottom of page, I forget which template outputs it), Move it so it's near top of page.

This should then: resolve mixins properly apply(33593)->applies customerData mixin and instantiate storage->read datamageinit customerData config options outout-> scripts requiring customerData should now have options configured, storage prop available, and proper function getExpiredSectionNames method.

[AndresInSpace]

@andy-aware I am not sure if the emoji response indicates that you tested and confirmed my fix above.
Please leave a comment to update us to confirm the above fix resolved the issue or not.

[andy-aware]

@AndresInSpace Looks as though the Patch did not resolve the issue. The email form on checkout still either loads or sporadically doesn't, and we have only been able to catch it with full-story - unable to replicate fully yet.

[AndresInSpace]

I can't reproduce this on a vanilla instance even. I followed the trace and came to same conclusion as #38274 (comment)
which is why I believed the patch I submitted should work as it resolves the race condition, and ensures the customerData mixin instantiates storage.
customerData is a dependency of checkoutData and checkout email has checkoutData as a dependency so its chained .. not sure what else to look at sorry