title: Next.js: How to dynamically import external client-side only React components into Server-Side-Rendering apps developed?
body: <p>I know this question has been asked multiple times before but none of the solution seems to work.</p>
  
  <p>I'm trying to use the library 'react-chat-popup' which only renders on client side in a SSR app.(built using next.js framework) The normal way to use this library is to call <code>import {Chat} from 'react-chat-popup'</code> and then render it directly as <code>&lt;Chat/&gt;</code>. </p>
  
  <p>The solution I have found for SSR apps is to check if <code>typedef of window !=== 'undefined'</code> in the <code>componentDidMount</code> method before dynamically importing the library as importing the library normally alone would already cause the <code>window is not defined</code> error. So I found the link <a href="https://github.com/zeit/next.js/issues/2940" rel="noreferrer">https://github.com/zeit/next.js/issues/2940</a> which suggested the following:</p>
  
  <pre><code>Chat = dynamic(import('react-chat-popup').then(m =&gt; {
    const {Foo} = m;
    Foo.__webpackChunkName = m.__webpackChunkName;
    return Foo;
  }));
  </code></pre>
  
  <p>However, my foo object becomes null when I do this. When I print out the m object in the callback, i get <code>{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}</code> How do I properly import the library and start using the <code>&lt;Chat/&gt;</code> element in this case?</p>