title: reveal.js: ReferenceError: navigator is not defined on fresh install
body: <p>I am trying to use reveal.js in my React.js/Next.js website based on this
  <a href="https://revealjs.com/installation/#installing-from-npm" rel="nofollow noreferrer">https://revealjs.com/installation/#installing-from-npm</a></p>
  <p>The error I get is:</p>
  <pre><code>Server Error
  
  ReferenceError: navigator is not defined
  This error happened while generating the page. Any console logs will be displayed in the terminal window.
  Source
  
  external%20%22reveal.js%22 (1:0) @ eval
  
  &gt; 1 | module.exports = require(&quot;reveal.js&quot;);
  </code></pre>
  <p>I read through the entire reveal site and searched, there is no reference to navigator or dependencies anywhere.</p>
  <p>This is my code, (the CSS is included in my <code>_app.js</code>):</p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head'
  import Link from 'next/link'
  import ContainerFull from '../components/container-full'
  import MoreStories from '../components/more-stories'
  import HeroPost from '../components/hero-post'
  import Intro from '../components/intro'
  import Layout from '../components/layout'
  import { getHomePage, getHomeSlides } from '../lib/api'
  import { CMS_NAME } from '../lib/constants'
  import Header from '../components/header'
  import dynamic from 'next/dynamic'
  
  const MySlides = dynamic(
    () =&gt; import('../components/slides'),
    { ssr: false }
  )
  
  export default function Page( {page, artwork} ) {
     return (
      &lt;&gt;
        &lt;Layout&gt;
          &lt;Head&gt;
            &lt;title&gt;{ page.seo.title }&lt;/title&gt;
            &lt;meta name=&quot;description&quot; content={page.seo.metaDesc} /&gt;
          &lt;/Head&gt;
          &lt;Header /&gt;
          &lt;ContainerFull&gt;
            &lt;h1&gt;{ page.title }&lt;/h1&gt;
            &lt;MySlides /&gt;
            &lt;div dangerouslySetInnerHTML={{ __html: page.content }} /&gt;
  
            {artwork.nodes &amp;&amp; artwork.nodes.map((arts) =&gt; (
              &lt;span&gt;{arts.title}&lt;/span&gt;
            ))}
          &lt;/ContainerFull&gt;
        &lt;/Layout&gt;
      &lt;/&gt;
    )
  }
  
  export async function getStaticProps({ params }) {
    const data = await getHomePage()
    console.log(data)
    const art = await getHomeSlides()
    console.log(art)
  
    return {
      props: {
        page: data,
        artwork: art,
      },
    }
  }
  </code></pre>
  <p><code>slides.js</code> file</p>
  <pre><code>import Reveal from 'reveal.js'
  import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'
  import React, { useEffect } from &quot;react&quot;
  
  const MySlides = () =&gt; {
    useEffect(() =&gt; {
      let deck = new Reveal({
          plugins: [ Markdown ]
      })
      deck.initialize()
    })
  
    return (
      &lt;div&gt;SlideShow&lt;/div&gt;
    )
  }
  
  export default MySlides
  </code></pre>