[Bug] No chat is shown when used together with react-facebook FacebookProvider

[alex-kowalczyk]

React-facebook provides variety of FB-related components. I strongly suspect there is a conflict causing the chat to often not show (but not always), possibly depending on the order of initialization of both packages.

---

Describe the bug

How To Reproduce

Steps to reproduce the behavior:

1. Setup both providers and messenger button

<FacebookProvider appId="xxxx">
<LiveChatLoaderProvider providerKey="yyyy" appId="xxxxx" provider="messenger" locale="en_US">
...
<Messenger />
</LiveChatLoaderProvider>
</FacebookProvider>

(Tried also without appId in LiveChatLoaderProvider) 2. Load the page 3. Click the messenger button

Actual results:

• Chat does not show most of the time (but not always)
• Exception is logged

TypeError: window.FB.CustomerChat is undefined
at .open ( [../../../src/providers/messenger.ts:81] )
at .open ( [../../../src/providers/messenger.ts:81] )
at .check ( [../../../src/utils/waitForLoad.ts:15] )
at .check ( [../../../src/utils/waitForLoad.ts:20] )
at .check ( [../../../src/utils/waitForLoad.ts:20] )
...

• Digging deeper I found that messenger.ts:loadScript:16 (link) returns false because window.FB is already there, possibly initialized by react-facebook package.

Expected behaviour

Should the check in messenger.ts not relay on window.FB presence, or ensure that customer chat is there?

[benschwarz]

@alex-kowalczyk, we don't use FB messenger so our knowledge is limited to what you've observed and reported (thank you for the all the details, btw!).

I agree, seems like the check should be window.FB?.CustomerChat in messenger.ts:loadScript:16. Given you've already got a test case in your site, did you want to give that a go and report back if successful?

[benschwarz]

Hey @alex-kowalczyk, just wanted to check back with you. Do you still have a test case that could help to verify my suggestion? Your feedback will be helpful in this regard 👍

[robmorieson]

@alex-kowalczyk — thanks for raising this one. Digging further into the issue we found that FacebookProvider removes CustomerChat from window.FB if initialized after react-live-chat-loader, so it would seem the two libraries aren't compatible.

Closing this one for now as an issue that might need to be resolved on react-facebook’s end.