TypeScript SDK - module_bindings does not import correctly from @clockworklabs-spacetimedb-sdk

[Zundrium]

I'm making a simple Typescript 5.8.0 project, where I run the command to generate the module_bindings folder:

spacetime generate --lang typescript --out-dir client/src/module_bindings --project-path server

This creates .ts files with imports from the @clockworklabs-spacetimedb-sdk.

CallReducerFlags for example is being imported as a variable, not as a type. So importing the current module_bindings results in this error:

Uncaught SyntaxError: The requested module 'http://localhost:5173/node_modules/.vite/deps/@clockworklabs_spacetimedb-sdk.js?v=8b3b85f2' doesn't provide an export named: 'CallReducerFlags'

Am I doing something wrong or is there a version mismatch between the sdk and the module_bindings?

[gefjon]

What version of the TypeScript SDK are you using, and what is spacetime --version of your CLI?

[Zundrium]

Hey @gefjon thanks for checking in.

Typescript is version 5.8.0 like stated above.
The CLI tool is version 1.0.1

Edit: And the typescript SDK is 1.0.3

[bfops]

User has suggested changes: https://discord.com/channels/1037340874172014652/1352130250884124743/1352130250884124743

[ImGajeed76]

I also just ran into this issue.

[ReedSyllas]

I also ran into this. For me it was because my tsconfig.json had:

"verbatimModuleSyntax": true

This stops vite (and probably other bundlers/compilers) from stripping the type imports in the autogenerated module_bindings files. This is a bug on spacetimedb's part, however, I know a temporary fix.

The easiest solution is to just set "verbatimModuleSyntax": false.

If you want to keep it on though, you'll need three tsconfigs:

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.bindings.json" }
  ]
}

tsconfig.app.json

{
  "include": [ "src" ],
  "exclude": [ "src/module_bindings" ], // This part is important. Make sure the path is correct for your setup.
  "compilerOptions": {
    // ...
    "verbatimModuleSyntax": true,
    // ...
  }
}

tsconfig.bindings.json

{
  "include": [ "src/module_bindings" ], // Again, make sure the path is correct for your setup.
  "compilerOptions": {
    // ...
    "verbatimModuleSyntax": false,
    // ...
  }
}

Your build should now strip the type imports in module_bindings, while still letting you use "verbatimModuleSyntax": true for everything else.