nhagen / react-intercom

A component to configure and enable Intercom in your react application
MIT License
237 stars 72 forks source link

window.Intercom undefined when using next.js #43

Closed arryanggaputra closed 6 years ago

arryanggaputra commented 6 years ago

When page is loaded for the first time, intercom widget is showing on the bottom of page, but when I go to another page (SPA) Intercom widget is not showing.

I try to type this window.Intercom on browser console, before go to another page I got this result

(){for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];var r={boot:function(t){e.createOrUpdateUser(t)},update:function(t){e.createOrUpdateUser(t)},s

But, when I go to another page the result of window.Intercom is undefined can you tell me what's wrong on here?

shauravg commented 6 years ago

I am having this issue as well. First page load, Intercom loads fine and it loads fine on every other page load.

shauravg commented 6 years ago

So this is what seems to be working for me now. Basically, I force the intercom component to render client side only and in my custom document wrapper, I initiate the 'boot' event with other data depending on whether a user is logged in or not. I am going to do some more testing to make sure but initial testing showed everything working correctly.

In my App.js (my custom document wrapper):

import { IntercomAPI } from 'react-intercom' const IntercomWrapper = dynamic(import('./IntercomWrapper'), { ssr: false })

componentDidUpdate() { if(isLoggedIn()) IntercomAPI('boot', getIdTokenAttributes()) //this is how I get my user data else IntercomAPI('boot') }

...

In my IntercomWrapper.js import Intercom from 'react-intercom' import config from '../config'

const IntercomWrapper = () => ( <Intercom appID={config['INTERCOM_APPID']} /> )

export default IntercomWrapper

arryanggaputra commented 6 years ago

@shauravg I already fix this by load intercom when componentDidMount() maybe like this

 {this.state.showIntercom && this._callIntercom()}