How to use the server with Typescript

[jakehsiao]

The documentation on server is only about js.

First I just copied the code in documentation into "server.js", but it failed because games are defined in typescript and js cannot import typescript modules.

Then I change it to "server.ts", but now I don't know how to run this.

So how to use server with typescript?

[larry801]

You need to build typescript first. Please refer to this project for more detail. https://github.com/averycrespi/thinktank https://github.com/averycrespi/thinktank/blob/f72fd089edaf5bc04b6600995065589a383c4703/package.json#L44

…

On Mon, Dec 21, 2020 at 7:16 AM 隔壁的泰山233 ***@***.***> wrote: The documentation on server is only about js. First I just copied the code in documentation into "server.js", but it failed because games are defined in typescript and js cannot import typescript modules. Then I change it to "server.ts", but now I don't know how to run this. So how to use server with typescript? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#874>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKAIMGLCUZUKBE2LGZDVRG3SV2AVZANCNFSM4VDOX4DQ> .

[delucis]

As @larry801 says, you need to compile the .ts file to plain JavaScript before running it with Node.

One other option is to use something like ts-node, which allows you to transpile and run from a single command (like ts-node ./server.ts). There are some limitations with ES modules, so you may need to tweak tsconfig.json to get this working correctly.

[sridharraman]

I still get an error if I follow the first approach. I have created a tsconfig.server.json file and the compilation of the server.ts happens successfully. But if I run the server using: node -r esm build/server/server/index.js, I get this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/user/work/game/build/server/index.js not supported.
Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.] {
  code: 'ERR_REQUIRE_ESM'
}

What do I do?

[jennyxing]

I would check your package.json for a line that looks like "type": "module".
My running theory is that interferes with node somehow... however, that line in my package.json was there because I bootstrapped my project with vite (react+typescript) and removing it seems to cause other errors.

Can someone who has more expertise comment on this? @delucis

[sridharraman]

Yes, that's correct. The issue seems to be due to the "type": "module". I was trying to use SvelteKit as the front-end for the game. It worked fine with single player and multi-player local. But once I moved to multi-player server, it fails as the server doesn't run, in either typescript or javascript. And this is due to the ESM error.

I moved to using Vue as the front-end and that's working fine. The typescript server also works fine, with the additional steps mentioned by @delucis.

I would still like to see if it would possible to use SvelteKit + boardgame.io together.

[5S]

I faced the same issue and spent a lot of time searching for a solution, but couldn't find any helpful information.
After trial and error, I found one solution, so I'm writing it here for future reference.
I tested this in a Remix 2.13 environment with Vite.

packages.json

{
...
  "type": "module",
  "scripts": {
...
    "build:server": "tsc -p tsconfig.server.json && echo '{ \"type\": \"commonjs\" }' > build/server/package.json",
    "start:server": "node build/server/server.js",
...

tsconfig.server.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "Node10",
    "noEmit": false,
    "outDir": "build/server/"
  },
  "include": ["app/server.ts"]
}

Since "type": "module" is required in the root package.json for Vite, I couldn’t modify it directly.
However, boardgame.io server requires "type": "commonjs".
To work around this, I created a package.json under the build directory with "type": "commonjs", which overwrites the setting.
You can refer to the build:server script for this workaround.
Additionally, I didn’t need to add -r esm to the start:server script in this way.

There may be a more elegant solution, so I hope someone can use this as a reference to further optimize it.

[benbot]

Nice! Thanks for this.

Some of our setup is a little behind the times (looking at you commonjs)

I just joined as the new maintainer, so look forward to some modernization cleanup.