title: Next.js - how to dynamically import highcharts component?
body: <p>I am using highcharts library with react-highcharts-official.</p>
  <p>The highcharts component size is 99kb and I want to dynamically load it. However, everything I tried was a failure unfortunately.</p>
  <p>This is how I use it now in my application</p>
  <pre><code>import * as Highcharts from &quot;highcharts&quot;;
  import ReactHighcharts from &quot;highcharts-react-official&quot;;
  </code></pre>
  <pre><code>&lt;ReactHighcharts
      highcharts={Highcharts}
      options={treeConfig}
  &gt;&lt;/ReactHighcharts&gt;
  </code></pre>
  <p>Now I tried to remove the import of Highcharts and dynamically import it by doing this:</p>
  <pre><code>const Highcharts = dynamic(() =&gt; import('highcharts'));
  </code></pre>
  <p>Usually the above works, but with this library I get the following error:</p>
  <blockquote>
  <p>rgument of type '() =&gt; Promise&lt;{ default: typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }&gt;' is not assignable to parameter of type 'DynamicOptions&lt;{}&gt; | Loader&lt;{}&gt;'.
  Type '() =&gt; Promise&lt;{ default: typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }&gt;' is not assignable to type '() =&gt; LoaderComponent&lt;{}&gt;'.
  Type 'Promise&lt;{ default: typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }&gt;' is not assignable to type 'LoaderComponent&lt;{}&gt;'.
  Type '{ default: typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }' is not assignable to type 'ComponentType&lt;{}&gt; | { default: ComponentType&lt;{}&gt;; }'.
  Type '{ default: typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }' is not assignable to type '{ default: ComponentType&lt;{}&gt;; }'.
  Types of property 'default' are incompatible.
  Type 'typeof import(&quot;C:/app/node_modules/highcharts/highcharts&quot;)' is not assignable to type 'ComponentType&lt;{}&gt;'</p>
  </blockquote>
  <p>Do you know why it happens? I also tried to use this:</p>
  <pre><code>const Highcharts = dynamic(() =&gt; import('highcharts') as any) ;
  </code></pre>
  <p>It removes the error but I see nothing in my application (the component is not rendered).</p>