title: Nestjs Svelte - import apexcharts in Svelte files
body: <p>I am new to Nodejs. I have created a Nestjs project, and I'm using svelte templates. I'm trying to create charts using apexcharts and it works like this:</p>
  <pre><code>// Chart.svelte
  &lt;script&gt;
      import Layout from './partials/Layout.svelte';
  &lt;/script&gt;
  &lt;svelte:head&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/apexcharts&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/js/chart.js&quot; defer&gt;&lt;/script&gt;
  &lt;/svelte:head&gt;
  &lt;Layout&gt;
      &lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
  &lt;/Layout&gt;
  </code></pre>
  <p>and the script is something like this:</p>
  <pre><code>// chart.js
  var options = {
      chart: {type: 'bar'},
      series: [{name: 'sales', data: [30,40,45,50,49,60,70,91,125]}],
      xaxis: {categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]}
  }
  var chart = new ApexCharts(document.querySelector(&quot;#chart&quot;), options);
  chart.render();
  </code></pre>
  <p>but when I tried doing it all in the svelte file like this:</p>
  <pre><code>// Chart.svelte
  &lt;script&gt;
      import Layout from './partials/Layout.svelte';
      import { onMount } from 'svelte';
  
      let options = {
          chart: {type: 'bar'},
          series: [{name: 'sales', data: [30,40,45,50,49,60,70,91,125]}],
          xaxis: {categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]}
      };
      let ApexCharts;
      let loaded = false;
      
      const machart = (node, options) =&gt; {
          if (!loaded) {
              return;
          }
          let myChart = new ApexCharts(node, options)
          myChart.render();
  
          return {
              update(options) {
                  myChart.updateOptions(options);
              },
              destroy() {
                  myChart.destroy();
              }
          }
      }
  
      onMount(async () =&gt; {
          console.log(&quot;before import&quot;);
          const module = await import('apexcharts');
          ApexCharts = module.default;
          window.ApexCharts = ApexCharts;
          loaded = true;
      });
  &lt;/script&gt;
  
  &lt;Layout&gt;
      {#if loaded}
      &lt;div use:machart={options}&gt;&lt;/div&gt;
      {:else}
      &lt;div class=&quot;spinner-border text-success&quot; role=&quot;status&quot;&gt;
          &lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
      &lt;/div&gt;
      {/if}
  &lt;/Layout&gt;
  </code></pre>
  <p>the onMount is not triggering at all and it keeps showing the loading div.<br />
  My question is how can I import apexcharts using <code>import ApexCharts from 'apexcharts';</code> in the svelte file and write all the js scripts in it?</p>