LiveChat Integration Issue

🙋Get Help
1

Hello,

I am facing issue for integration LiveChat Component in our frontity

I have followed below steps:

  1. npm install react-livechat --save

  2. /packages/twentytwenty-theme/src/components/index.js
    const LiveChat = loadable(() => import(‘react-livechat’));
    < LiveChat license={your_license_id} />

  3. See below errors:
    ReferenceError: window is not defined
    at eval (webpack-internal:///./packages/twentytwenty-theme/src/components/index.js:22:47736)
    at Module…/packages/twentytwenty-theme/src/components/index.js (/home/ubuntu/vrinsoftreact/build/server.js:15621:1)
    at webpack_require (/home/ubuntu/vrinsoftreact/build/server.js:27:30)
    at eval (webpack-internal:///./packages/twentytwenty-theme/src/index.js:4:69)
    at Module…/packages/twentytwenty-theme/src/index.js (/home/ubuntu/vrinsoftreact/build/server.js:17457:1)
    at webpack_require (/home/ubuntu/vrinsoftreact/build/server.js:27:30)
    at eval (webpack-internal:///./build/bundling/entry-points/server.ts:3:96)
    at Module…/build/bundling/entry-points/server.ts (/home/ubuntu/vrinsoftreact/build/server.js:139:1)
    at webpack_require (/home/ubuntu/vrinsoftreact/build/server.js:27:30)
    at /home/ubuntu/vrinsoftreact/build/server.js:104:18

Please reply me soon. what i should to do LiveChat Integration?

Thank you

2

Hi pramod.r! This happens because the component is trying to use the window object in the Server Side Rendering (maybe to get the width of the browser or something like that). On the Server Side Rendering, there is no window object because the server still don’t know how or who the browser will be.

To avoid this error you can simply check if the window object exist before calling the react-livechat component:

  if (typeof window !== 'undefined'){
    < LiveChat license={your_license_id} />
  }

or

  (typeof window !== 'undefined') &&
    < LiveChat license={your_license_id} />
1 Like
3

Thank you so much, It works well now.