ReferenceError: Can't find variable: ApexCharts

[nineclue]

Hi,

I'm trying to use Apexcharts. I'm new to scalablytyped and this is my first project.
There is no error in compile time, but I've got error (ReferenceError: Can't find variable: ApexCharts) in runtime.

Followings are Converter's output and my source file.

// global.scala
// there is a separate ApexCharts.scala which contains definition of ApexCharts trait and object, where object contains only ApexChartOption definitions
package typings.apexcharts

import org.scalablytyped.runtime.StObject
import scala.scalajs.js
import scala.scalajs.js.annotation.{JSGlobalScope, JSGlobal, JSImport, JSName, JSBracketAccess}

object global {
  
  @JSGlobal("ApexCharts")
  @js.native
  open class ApexCharts protected ()
    extends StObject
       with typings.apexcharts.ApexCharts {
    def this(el: Any, options: Any) = this()
  }
  object ApexCharts {
    
    @JSGlobal("ApexCharts")
    @js.native
    val ^ : js.Any = js.native
    
    /* static member */
    inline def exec(chartID: String, fn: String, args: Any*): Any = (^.asInstanceOf[js.Dynamic].applyDynamic("exec")((scala.List(chartID.asInstanceOf[js.Any], fn.asInstanceOf[js.Any])).`++`(args.asInstanceOf[Seq[js.Any]])*)).asInstanceOf[Any]
    
    /* static member */
    inline def getChartByID(chartID: String): js.UndefOr[typings.apexcharts.ApexCharts] = ^.asInstanceOf[js.Dynamic].applyDynamic("getChartByID")(chartID.asInstanceOf[js.Any]).asInstanceOf[js.UndefOr[typings.apexcharts.ApexCharts]]
    
    /* static member */
    inline def initOnLoad(): Unit = ^.asInstanceOf[js.Dynamic].applyDynamic("initOnLoad")().asInstanceOf[Unit]
  }
}

import typings.apexcharts.apexchartsRequire
import typings.apexcharts.*
import typings.apexcharts.ApexCharts.ApexOptions
import typings.apexcharts.apexchartsStrings

object Demo:
    import typings.apexcharts.anon.Data

    val option = ApexOptions()
                    .setChart(ApexChart().setType(apexchartsStrings.line))
                    .setSeries(js.Array(Data(js.Array(30,40,35,50,49,60,70,91,125)).setName("sales")))
                    .setXaxis(ApexXAxis().setCategories(js.Array(1991,1992,1993,1994,1995,1996,1997, 1998,1999)))

    @main
    def main(): Unit =
        apexchartsRequire
        val chartdiv = dom.document.getElementById("chart")
        val chart = global.ApexCharts(chartdiv, option)
        chart.render()
    end main

I can't figure out how to call ApexCharts constructor. Any help would be appreciated.
Following is apexchart's typescript file. https://github.com/apexcharts/apexcharts.js/blob/main/types/apexcharts.d.ts

[oyvindberg]

You can try it in the javascript debugger, just write ApexCharts and see if it's there. Otherwise you'll need to include the javascript file for the library into you html so it's loaded. The require trick you use there applies to setups where you use a bundler and you want the bundler to pick it up

[nineclue]

Thanks for kind reply.

Yes, after including the chart separately program works!
I entered sbt fastOptJS/webpack and thought that its output (...fastopt-bundle.js) will include Apexchart.

Just for curiosity, is there a way to make a single js file?

[oyvindberg]

You use a bundler for that, see scalajs-bundler or the new vite integration plugin

[nineclue]

I'll try to find out how to combine both. Anyway your converter's output really helped a lot.
Thanks again.