title: NextJS - window is not defined
body: <p>I'm trying to import <a href="https://www.npmjs.com/package/typewriter-effect" rel="noreferrer">Typewriter Effect</a> into my NextJS project, but whenever I do, I get this error that reads the following:</p>
  
  <blockquote>
    <p>ReferenceError: window is not defined</p>
  </blockquote>
  
  <p>and from what I've read, the error is displaying because it's trying to load the library on the server-side rather than the client-side.</p>
  
  <p>So when I simply try to import it like this:</p>
  
  <p><code>import Typewriter from 'typewriter-effect'</code></p>
  
  <p>the error promptly displays.</p>
  
  <p>People suggested that I try something like this:</p>
  
  <pre><code>let Typewriter
  if (typeof window !== 'undefined') {
    Typewriter = require( 'typewriter-effect' )
  }
  </code></pre>
  
  <p>however, it doesn't work like this either. I get an error that reads the following:</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.</p>
  </blockquote>
  
  <p>I've searched a lot of places for a potential solution to this problem, but I've been unsuccessful with my attempts.</p>