Having difficulty importing emscripten wasm c++ class into svelte component

I’ve been trying to use my c++ class in my svelte component, and been beating my head against the screen for the past week trying to figure out how to do this. I’m comfortable in c++ but not so much in JS, which I suspect is part of the issue.
My c++ code is :

#include <emscripten/emscripten.h>
#include <emscripten/val.h>
#include <emscripten/bind.h>

using namespace emscripten;
using emscripten::val;
using namespace std;
thread_local const val document = val::global("document");

class MyClass{
  private :
  val canvas;
  val ctx;
  public :
MyClass(std::string id){
  canvas = val::global("document").call<val>("getElementById", val(id));
  ctx = canvas.call<val>("getContext", val("2d") );}

void greenRect(){
   emscripten_run_script("alert('greenrect')");
   ctx.set("fillStyle", "green");
   ctx.call<void>("fillRect", 10, 10, 150, 100);
 }
 ~MyClass(){}};

  EMSCRIPTEN_BINDINGS(MyClassModule) {
   class_<MyClass>("MyClass")
     .constructor< std::string>()
     .function("greenRect", &MyClass::greenRect)
     ;}

In this example my life would probably be easier if I just switched to a C++ function rather than a class, but I would like to keep it as a class unless this is completely non-viable (which it shouldn’t be).
My current invocation of the compiler is em++ -s ALLOW_MEMORY_GROWTH=1 -lembind -s USE_SDL=2 -s ENVIRONMENT='web' -s SINGLE_FILE=1 chart.cpp -o glue.js

The script portion of the App.svelte component is

  import { onMount } from "svelte";
  import { MyClass } from "../em/glue.js";
  onMount(async () => {
    alert("pre");
    const chart = new Module.MyClass("canvas0");
    alert("post");
    chart.greenRect();
  });

I get the “pre” popup but never the “post” popup.

I’ve tried several variations on the import statement with import MyClass from 'glue.js', <script src ="glue.js"> in the svelte:header section. I’ve also tried a variety of CLI options including-s MODULARIZE=1, -s EXPORT_ES6=1,-s EXPORT_ALL=1, -s WASM=1 none of which seem to fix this issue.

The problem is that I keep getting errors in the browser
import { MyClass } from 'glue.js' -> “Uncaught SyntaxError: ambiguous indirect export: MyClass”
import * as MyClass from 'glue.js' -> Uncaught (in promise) TypeError: Module.MyClass is not a constructor
import MyClass from 'glue.js' -> Uncaught SyntaxError: ambiguous indirect export: default
I’ve also changed the const chart = new MyClass("canvas0") to const chart = new Module.MyClass("canvas0"); and const chart = new MyClass.MyClass("canvas0");

Yup, JS is not my strong point and I’m admittedly just throwing stuff at the wall to see what sticks.

If someone could point me in the right direction I’d really appreciate it. I tried to get chatGPT and Bard to fix the issue and have come away feeling confident that coders’ jobs are secure for the foreseeable future.

I appreciate any help you can give.
Thanks