[SOLVED] Why does JSXGraph board appear blank?

Why does JSXGraph board appear blank?

I'm running the sample JSXGraph code in Svelte, but nothing shows up. The div has the appropriate dimensions but is blank.

I installed JSXGraph via npm, and in order for it to run at all without errors, I made the following modifications:

I added type:module to the package.json.
I added .js to every import statement within the package.
I imported "canvas" and defined JXG.readCanvas in renderer/canvas.js

Below is the svelte file. When it is run, hello, followed by a 500px gap, followed by another hello is displayed.

<script>
    import JXG from 'jsxgraph';
    let board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5], axis: true});
    let p = board.create('point', [1, 2], {name: 'point'});
</script>

<main>
<p>hello</p>
<div id="box"/>
<p>hello</p>
</main>

<style> 
    #box {
        max-width: 500px;
        aspect-ratio: 1/1;
    }
</style>

The problem seems to be that JSXGraph isn't injecting into the div, which can be seen in the generated html: <div id="box" class="s-y_bCXRrkrYfP"></div>. It's just an empty div.

Can someone help?

Solution

I don't know your JSX Graph, but I'm guessing the problem is that your JSX Graph code runs before the HTML code in the component has been created. Try putting your two lines of JSX Graph code in a function you pass to onMount().