Error: Failed to execute 'postMessage' on 'DOMWindow'

[ahkhanjani]

Using useCallFrame, I get this error in the console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://xxx.daily.co') does not match the recipient window's origin ('http://localhost:xxx').

Using an error boundary, the call frame doesn't render. But without it, everything works just fine. I'm not sure what the issue can be.

I'm wrapping my call with <DailyProvider> and passing the call frame object as callObject.

[Regaddi]

@ahkhanjani Are you able to provide the full call stack for this error? Ideally you can pinpoint the exact location of the postMessage that's causing this error using your browser's dev tools, this would be really helpful to narrow down the origin of the issue.

[ahkhanjani]

@Regaddi Here's the full call stack:

x	x
value	daily-esm.js:7
value	daily-esm.js:7
value	daily-esm.js:7
eval	call.tsx:83
commitHookEffectListMount	react-dom.development.js:23150
commitPassiveMountOnFiber	react-dom.development.js:24926
commitPassiveMountEffects_complete	react-dom.development.js:24891
commitPassiveMountEffects_begin	react-dom.development.js:24878
commitPassiveMountEffects	react-dom.development.js:24866
flushPassiveEffectsImpl	react-dom.development.js:27039
flushPassiveEffects	react-dom.development.js:26984
eval	react-dom.development.js:26769
workLoop	scheduler.development.js:266
flushWork	scheduler.development.js:239
performWorkUntilDeadline	scheduler.development.js:533

I believe everything after call.tsx is unrelated to the issue. call.tsx is the file that contains all of the Daily code. The specified line (83) is:

callFrame.once("loaded", () => setInitialConfigApplied(true));

I commented that line and now this line is specified:

callFrame.on("left-meeting", () => { ... });

This line that comes before them does not throw an error:

void callFrame.join({ ... });

So callFrame.once() and callFrame.on() trigger the error and callFrame.join() does not.

But by removing both .once() and .on() the call stack becomes:

x	x
value	daily-esm.js:7
value	daily-esm.js:7
value	daily-esm.js:7
eval	daily-react.esm.js:2595
eval	daily-react.esm.js:307
eval	daily-react.esm.js:306
...	[The same react-dom stuff]

It appears to be an internal problem.

[ahkhanjani]

Hey @Regaddi,

Any updates on this? Since this is preventing me from using the new hook in production.
Both in localhost and the preview channel build we get the same error in the client console.

[Regaddi]

Hey @ahkhanjani,

I haven't been able to reproduce the issue myself.
For this specific issue it would be helpful to have a reliable reproduction case, ideally in a codesandbox or codepen, to further investigate the issue.

I think this is fairly related to daily-co/daily-js#241, but couldn't confirm, yet.

Thanks in advance and apologies for the delay here!

[ahkhanjani]

Closing for now as it's probably some other library causing this. If the issue still remains after getting rid of the suspects I will let you know. Thanks again @Regaddi.