Typescript runtime code with Webpack

Has anyone gotten Webpack to work with Typescript for building the runtime index.js bundle?

I can only get it to output browser code, which the server can’t parse, or code which doesn’t seem complete. Setting Webpack’s "target": "node" option has no effect (still outputs browser code), and using "target": "es5" causes InitModule function not found. fatal error when the server tries to start.

Webpack is necessary since Typescript can’t natively bundle its code with node modules (like lodash). So you need to use Webpack to bundle it instead.

const path = require("path");

module.exports = {
    entry: "./src/main.ts",
    target: "es5",
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "index.js",
    },
};

@jasontosh We’ve not yet experimented with other bundlers instead of the builtin features of the TypeScript compiler to bundle the code. Can you open a feature request on the nakama-common repo and we’ll take a look at what it looks like to add support for a tool like Webpack.

I should also mention that the JS runtime in Nakama server is not the Node runtime so you should not expect to be able to resolve modules through Node-style imports. This is why we recommend the vanilla TypeScript toolchain to bundle your code.

Ok, I created an issue for it: [Feature] Example or template using Webpack as bundling tool for Typescript runtime code · Issue #571 · heroiclabs/nakama · GitHub

Webpack should be able to bundle all dependencies and eliminate the imports entirely. I think. People say it can. :sweat_smile: I’m still learning. I’ll keep banging on it.

2 Likes