# Is it possible to bundle and include npm/yarn packages in my server runtime code?

**URL:** <https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426>\
**Category:** Runtime Framework\
**Tags:** server-framework, typescript\
**Created:** [March 11, 2021, 2:54am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426 "2021-03-11T02:54:38Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasontosh](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@jasontosh](https://forum.heroiclabs.com/u/jasontosh)\
**Post date:** [March 11, 2021, 2:54am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/1 "2021-03-11T02:54:38Z")

</div>

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.

```auto
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",
    },
};

```

---

<div class="post-metadata">

**Author:** ![novabyte](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/novabyte/32/1324_2.png) [@novabyte](https://forum.heroiclabs.com/u/novabyte)\
**Post date:** [March 11, 2021, 4:39pm UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/2 "2021-03-11T16:39:01Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![jasontosh](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@jasontosh](https://forum.heroiclabs.com/u/jasontosh)\
**Post date:** [March 12, 2021, 12:15am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/3 "2021-03-12T00:15:31Z")

</div>

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](https://github.com/heroiclabs/nakama/issues/571)

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

---

<div class="post-metadata">

**Author:** ![xiaoNiuNew](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/xiaoniunew/32/330_2.png) [@xiaoNiuNew](https://forum.heroiclabs.com/u/xiaoNiuNew)\
**Post date:** [April 21, 2021, 6:50am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/4 "2021-04-21T06:50:00Z")

</div>

😀 if JS runtime can use many third part JS/TS libs easily, that would be exciting

---

<div class="post-metadata">

**Author:** ![jasontosh](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@jasontosh](https://forum.heroiclabs.com/u/jasontosh)\
**Post date:** [April 22, 2021, 1:17am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/5 "2021-04-22T01:17:48Z")

</div>

A while back, I got the package to build with Webpack (and Babel), but the server still fails to start, saying it can’t find the `InitModule` function (details in the GitHub issue).

Seems like if the server was more flexible about how that function can be defined/discovered, maybe it would work? But I’m only guessing and haven’t yet looked at what the server code tries to do at start up.

---

<div class="post-metadata">

**Author:** ![tailam1990](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/tailam1990/32/669_2.png) [@tailam1990](https://forum.heroiclabs.com/u/tailam1990)\
**Post date:** [May 26, 2021, 8:45am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/6 "2021-05-26T08:45:13Z")

</div>

I’ve found that it is easier to use Rollup instead to bundle the code in a way that can be used in Nakama. I’ve set up a template `https://github.com/tailam1990/nakama-rollup-ts`, perhaps you can find something useful there for a webpack setup. I have yet to be able to setup webpack correctly without InitModule being wrapped in IIFEs or other problems.

---

<div class="post-metadata">

**Author:** ![jasontosh](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@jasontosh](https://forum.heroiclabs.com/u/jasontosh)\
**Post date:** [May 27, 2021, 10:51am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/7 "2021-05-27T10:51:08Z")

</div>

Cool! Thank you for sharing your solution. I’ll have a look at it. 👍

---

<div class="post-metadata">

**Author:** ![jasontosh](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@jasontosh](https://forum.heroiclabs.com/u/jasontosh)\
**Post date:** [July 5, 2021, 5:19pm UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/8 "2021-07-05T17:19:13Z")

</div>

I finally got time to try this, and **it worked**! 😳 I am able to import and use `lodash` and other things. Only change I had to make was to set the build target in `tsconfig.json` to “es5”.

Thank you, @tailam1990 for providing your example! 🙌

---

<div class="post-metadata">

**Author:** ![sean](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/sean/32/643_2.png) [@sean](https://forum.heroiclabs.com/u/sean)\
**Post date:** [July 27, 2021, 9:39am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/9 "2021-07-27T09:39:28Z")

</div>

We’ve also extended our Server Framework TypeScript setup to show you how to use Rollup to bundle and include npm/yarn packages in your server runtime code [TypeScript Setup - Heroic Labs Documentation](https://heroiclabs.com/docs/nakama/server-framework/typescript-setup/#bundling-with-rollup)

---

<div class="post-metadata">

**Author:** ![mataemon](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mataemon](https://forum.heroiclabs.com/u/mataemon)\
**Post date:** [March 11, 2022, 10:57am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/10 "2022-03-11T10:57:57Z")

</div>

Hi all,

sorry to unbury this topic, but I have problems with my project.

I followed the documentation to bundle with rollup, it seems to work fine, but only the main.ts file is bundled.  
I have others files in src (match\_handler, match\_rpc etc…), and they are not bundle in the final file.

I didn’t know rollup and I’m quite new in ts, nodejs.

I used the source files from the github template.

Did I miss something?

EDIT : Should I add .bind(null) for each methods I declare? Is there a more convenient way?

thanks in advance

---

<div class="post-metadata">

**Author:** ![formatCvt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/formatcvt/32/1127_2.png) [@formatCvt](https://forum.heroiclabs.com/u/formatCvt)\
**Post date:** [March 15, 2022, 1:53pm UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/11 "2022-03-15T13:53:28Z")

</div>

Hi, you should add imports i think

 ![изображение](https://us1.discourse-cdn.com/flex020/uploads/heroiclabs/original/2X/9/9b361e0aacbeb7b20bedc757c1c77b8b4446262c.png)

---

<div class="post-metadata">

**Author:** ![mataemon](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mataemon](https://forum.heroiclabs.com/u/mataemon)\
**Post date:** [March 15, 2022, 5:21pm UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/12 "2022-03-15T17:21:10Z")

</div>

Hi,  
this is exactly what I missed.  
thx a lot!

---

<div class="post-metadata">

**Author:** ![colin](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@colin](https://forum.heroiclabs.com/u/colin)\
**Post date:** [April 8, 2022, 12:07am UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/13 "2022-04-08T00:07:51Z")

</div>

Hi there. I have my server running smoothly using rollup, babel, and docker, but I’m running into an issue when I try to include certain npm libraries.

For example, if I add papaparse (a CSV parser) to my project with “npm i papaparse”, and then do “npm build run” to see the code that Rollup is generating, I find this in the top line:

```auto
import require$$0 from 'stream';

```

For some reason, babel is correctly transpiling most of the code, but fails to transpile that import command. (Which then causes the Nakama server to fail when trying to import the JS code since that line is ES6.)

My setup is identical to the recommended setup from the Nakama typescript getting started guides.

**rollup.config.js**

```auto
import resolve from '@rollup/plugin-node-resolve';
import commonJS from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import babel from '@rollup/plugin-babel';
import typescript from '@rollup/plugin-typescript';
import pkg from './package.json';

const extensions = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.es6', '.json', '.map'];

export default {
	input: './src/main.ts',
	external: ['nakama-runtime'],
	plugins: [
		// Allows node_modules resolution
		resolve({ extensions }),

		// Compile TypeScript
		typescript(),

		json(),

		// Resolve CommonJS modules
		commonJS({ extensions }),

		// Transpile to ES5
		babel({
			extensions,
			babelHelpers: 'bundled',
		}),
	],
	output: {
		file: pkg.main,
	},
};

```

**babel.config.json**

```auto
{
    "presets": ["@babel/preset-env"],
}

```

Any idea what I need to do to get babel to work correctly? I’m assuming it has something to do with the fact that the code in question is in node\_modules, but everything I’ve tried to fix it hasn’t worked.

Thanks!

---

<div class="post-metadata">

**Author:** ![formatCvt](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.heroiclabs.com/formatcvt/32/1127_2.png) [@formatCvt](https://forum.heroiclabs.com/u/formatCvt)\
**Post date:** [April 9, 2022, 1:23pm UTC](https://forum.heroiclabs.com/t/is-it-possible-to-bundle-and-include-npm-yarn-packages-in-my-server-runtime-code/1426/14 "2022-04-09T13:23:33Z")

</div>

> [@colin](#):
>
> For some reason, babel is correctly transpiling most of the code, but fails to transpile that import command. (Which then causes the Nakama server to fail when trying to import the JS code since that line is ES6.)

this is fine, nakama javascript VM build on top of goja - [GitHub - dop251/goja: ECMAScript/JavaScript engine in pure Go](https://github.com/dop251/goja#features) and stream is an abstract interface for working with streaming data in Node.js