how to import JXG in a Svelte app?

[Steven Clontz]

Naively, I'm trying the following in order to initialize a JXSGraph in my Svelte app (having already run `npm i jsxgraph` to install the package):

<script lang="ts">

    import JXG from "jsxgraph"

    import { onMount } from "svelte"

    export let points:number[][]

    let boardDiv:HTMLElement

    let jsxgraph:JXG.Board

    onMount(async () => {

        jsxgraph  = JXG.JSXGraph.initBoard(boardDiv, {

            boundingbox: [-0.1, 1.1, 1.1, -0.1],

            axis: true,

        })

        points.forEach(p=>{

            jsxgraph.create('point',p,{fixed:true});

        })

    });

</script>

<div

    class="graph"

    bind:this={boardDiv}>

    <div class="loading">

        Loading...

    </div>

</div>

However, this is giving me the below error. What is the correct way to import JGX instead?

(node:4388) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
3:31:51 PM [vite] Error when evaluating SSR module /src/lib/Graph.svelte: failed to import "jsxgraph"
|- /workspaces/tda/node_modules/jsxgraph/src/index.js:2
import JXG from './jxg';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

3:31:51 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/Graph.svelte"
|- /workspaces/tda/node_modules/jsxgraph/src/index.js:2
import JXG from './jxg';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

/workspaces/tda/node_modules/jsxgraph/src/index.js:2
import JXG from './jxg';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)