Error rendering Builder Component on mobile (when open link via Messenger App) with Hydrogen 2

Bugs
1

Hi Builder team, my project has an error that I can’t fix and I need your team’s support.
I use @builder.io/react: 3.0.7-1
When I send the web link via Messenger and I try to open it on my phone app (model: Iphone 13 mini), I can see all the Builder components are crashing.
I have test on my Android device and it not have that error (just appear on IOS device).
Here is how the error occurs.

Builder content link

image
image1909×779 70.5 KB

Builder public api key
5ff9122e249a486280d63ca7d5939ca0

Detailed steps to reproduce the bug

  • Install hydrogen: npm create @shopify/hydrogen@latest
    → Connect to Shopify: Use sample data from Mock.shop (no login required)
    → Where would you like to create your storefront: hydrogen1
    → Select a language: TypeScript
    → Select a styling library: Tailwind
    → Install dependencies with npm: Yes
    → Create a global h2 alias to run commands instead of npx shopify hydrogen: Yes
    → Do you want to scaffold routes and core functionality: No, set up later (run h2 setup)
  • Intergrate with Builder IO
    → Builder API Key: 5ff9122e249a486280d63ca7d5939ca0
    → Model: ‘page-section’
    → id: ‘948239e6de2c46a9bc356ef061981dd3’

After that: send the link to Messenger (Facebook) and open the link on Messenger app on mobile device (IOS).

Screenshots or video link

image
image591×1280 75.8 KB

Code stack you are integrating Builder with

Hydrogen 2

Reproducible code example

at app/routes/($locale)._index.tsx

2

Hi @ducanh,

Would you be able to share the site URL, where we can test this issue?

4

When I publish and deploy to codesanbox the page be crashed. (https://plyg7r-3000.csb.app/)
So you can use my ngrok link here: https://617e-27-74-249-220.ngrok-free.app/

5

hi @manish-sharma

You can use this link to test, I will delete this comment in 3 days.

6

Hello @ducanh!

Thanks for sharing the link, we are looking into this currently and we will update you as soon as we have any insights on this. Thank you!

7

Hi @manish-sharma

Is there any update on this issue?

Thanks.

8

Hello @ducanh,

We have been able to successfully reproduce the issue on our end. A ticket has been created for our engineering team to conduct a deeper investigation into the problem at the code level and develop a solution. The ticket is currently in the process of being addressed, and our team is actively working on resolving it.

I understand the importance of this matter, and I will personally work to prioritize it within our team’s tasks. As progress is made, I will keep you informed with regular updates on the status and any developments.

Thank you for your patience and understanding as we work to address this issue. If you have any additional information or questions, please don’t hesitate to let us know.

9

Hi @manish-sharma

Has this issue been resolved?
My project is reaching the completion and handover stage, I hope this problem will be fixed as soon as possible.

Thanks.