Problems with Mystmd

[tuncbkose]

I'm trying to use Bonito with a Myst-md website and I cannot seem to get it to work.
Using myst build --html --execute on a project with example.md, which is given below.
Browser console contains a number of errors: some minified react errors that may be unrelated, and

Uncaught ReferenceError: Bonito is not defined
error in closure from: /u/36/koset1/unix/.julia/packages/WGLMakie/1tRTy/src/three_plot.jl:42
Source:
import(BONITO_IMPORTS['097678d85a0b3cf63a1b98a5d23753707cd7babd-wglmakie.js']).then(WGL => {
    try {
        const renderer = WGL.create_scene(
            document.querySelector('[data-jscall-id="4"]'), document.querySelector('[data-jscall-id="5"]'), __lookup_interpolated('7065689714906606795'), __lookup_interpolated('14404915099394975135'), __lookup_interpolated('5594786187614781653'), 600, 450,
            __lookup_interpolated('9917052162919175311'), 30.0, __lookup_interpolated('7214577184927087312'), __lookup_interpolated('7214577184927087312'), __lookup_interpolated('7214577184927087312')
        )
        const gl = renderer.getContext()
        const err = gl.getError()
        if (err != gl.NO_ERROR) {
            throw new Error("WebGL error: " + WGL.wglerror(gl, err))
        }
        __lookup_interpolated('4945106961639756791').notify(true)
    } catch (e) {
        Bonito.Connection.send_error("error initializing scene", e)
        __lookup_interpolated('4945106961639756791').notify(false)
        return
    }
})
Error while processing message {"msg_type":"2"}
ReferenceError: BONITO_IMPORTS is not defined

example.md:

---
kernelspec:
  display_name: Julia 1.10.4
  name: julia-1.10
---

```{code-cell} julia
using WGLMakie, Bonito
Page(exportable=true, offline=true)

x = range(-π, π, 101)
xlims = (-π, π)

app = App() do session
    slider = Bonito.Slider(x; style=Styles("grid-column" => "2"))
    fig, ax, lplot = lines(x, sin; linewidth = 3)
    xlims!(ax, xlims)

    p = @lift(Point($slider[], sin($slider[])))
    splot = scatter!(ax, p; color = 3, colormap = :tab10, colorrange = (1, 10), markersize=20)

    slope = cos(slider[])
    intercept = sin(slider[]) - slope*slider[]
    abplot = ablines!(ax, [intercept], [slope]; color = 2, colormap = :tab10, colorrange = (1, 10), linewidth=2)

    onjs(session, slider.value, js"""function on_update(new_val) {
        $(splot).then(plots=>{
            const scatter = plots[0]
            scatter.geometry.attributes.pos.array[0] = new_val
            scatter.geometry.attributes.pos.array[1] = Math.sin(new_val)
            scatter.geometry.attributes.pos.needsUpdate = true
        })
    }
    """)
    onjs(session, slider.value, js"""function on_update(new_val) {
        const slope = Math.cos(new_val);
        const intercept = Math.sin(new_val) - slope*new_val;
        const start_y = slope*(-Math.PI) + intercept;
        const end_y = slope*Math.PI + intercept;

        $(abplot).then(plots=>{
            const abplot = plots[0]
            // change the y coord for the (start/end)points of the line
            abplot.geometry.attributes.linepoint_end.data.array[3] = start_y
            abplot.geometry.attributes.linepoint_end.data.array[5] = end_y
            abplot.geometry.attributes.linepoint_end.needsUpdate = true
        })
    }
    """)
    grid = Grid(
      slider, 
      DOM.div(fig; style=Styles("grid-column" => "1 / 4", "justify-self" => "center")); 
      width="800px", 
      height="500px", 
      justify_content="center",
      rows = "25px 1fr",
      columns = "145px 1fr 100px"
    )

    return grid
end
```