Chargebee iFrame not loading during Cypress test (Uncaught (in promise) Error: No message target specified)

[TedisAgolli]

Hello!

I am trying to run a Cypress test which loads a page and fills in the Chargebee information. The Chargebee iFrame with the payment information fails to load with an error Uncaught (in promise) Error: No message target specified

This is what I'm trying to load.

       <CardComponent
          ref={cardRef}
          className='w-100'
        >
          <CardNumber placeholder='4111 1111 1111 1111' className='field empty' />
          <CardExpiry placeholder='MM / YY' className='field empty' />
          <CardCVV placeholder='CVV' className='field empty' />
        </CardComponent>

The page loads correctly in both dev and prod mode, when running outside of Cypress. I can verify that Chargebee.getInstance() returns a valid instance, even inside the Cypress runner. The iFrame is present on the page, but it's body is empty.

I tried chasing the error down in this file but was not able to understand what it means.

Any guidance is appreciated.

Thank you in advance!

[Brandons404]

Were you able to find a solution to this? The error message itself is less than helpful.

[TedisAgolli]

Nope. We've also opened up a support ticket and still haven't been able to figure it out.

[rainkinz]

Same issue. Very annoyingly useless message.

[cb-dinesh]

Hi, Sorry for the delay in addressing this. Let me look into it and get back.

[rainkinz]

Thanks, it's probably some setup issue, but very hard to figure out. I tried my setup with the example app and it works fine, with my app, which is a nextjs app (and I tried remix), it is not working. Do these wrappers actually work with React 18?

[dbrad311]

Any update on this issue?

[rainkinz]

Any update?