title: How can I fix "Cannot read property 'document' of undefined" when directly accessing the url? Next.js and apexcharts lib
body: <p>I am using the react-apexcharts lib: <a href="https://github.com/apexcharts/react-apexcharts" rel="nofollow noreferrer">https://github.com/apexcharts/react-apexcharts</a>. </p>
  
  <p>When I import a component that imports the lib into a page it works great when I navigate to it (client side routing). but when accessing the page directly with the URL I get an error:</p>
  
  <pre><code>Cannot read property 'document' of undefined
  TypeError: Cannot read property 'document' of undefined
  at Object.&lt;anonymous&gt; (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:433939)
  at Object.&lt;anonymous&gt; (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:433950)
  at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
  at Object.&lt;anonymous&gt; (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:169139)
  at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
  at Object.&lt;anonymous&gt; (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:456290)
  at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
  at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:769
  at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:780
  at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:143
  at Object.&lt;anonymous&gt; (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:263)
  at Module._compile (internal/modules/cjs/loader.js:689:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
  at Module.load (internal/modules/cjs/loader.js:599:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
  at Function.Module._load (internal/modules/cjs/loader.js:530:3)
  </code></pre>
  
  <p>It is worth noting that I am using next.js which using server side rendering.</p>
  
  <p>The code is irrelevant IMO, I just created the example component from their github docs: </p>
  
  <pre><code>import Chart from 'react-apexcharts'
  import React, { Component } from "react";
  
  class ChartExample extends Component {
  constructor(props) {
      super(props);
  
      this.state = {
          options: {
              chart: {
                  id: 'apexchart-example'
              },
              xaxis: {
                  categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
              }
          },
          series: [{
              name: 'series-1',
              data: [30, 40, 45, 50, 49, 60, 70, 91]
          },
          {
              name: 'series-2',
              data: [90, 210, 105, 50, 43, 99, 333, 4]
          }]
      }
  }
  render() {
      return (
          &lt;Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} /&gt;
      )
  }
  }
  
  export default ChartExample;
  </code></pre>
  
  <p>And I import it regularly:</p>
  
  <pre><code>import ChartExample from "../../components/dashboard/ChartExample";
  </code></pre>
  
  <p>How can I fix this? I believe it is an issue with the server side rendering of next.js</p>