# Basic development setup problem

**URL:** <https://forum.babylonjs.com/t/basic-development-setup-problem/61757>\
**Category:** Questions\
**Tags:** typescript, npm, build, webpack\
**Created:** [December 11, 2025, 3:05pm UTC](https://forum.babylonjs.com/t/basic-development-setup-problem/61757 "2025-12-11T15:05:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [December 11, 2025, 3:05pm UTC](https://forum.babylonjs.com/t/basic-development-setup-problem/61757/1 "2025-12-11T15:05:11Z")

</div>

I’m trying to follow “[Getting Started](https://doc.babylonjs.com/guidedLearning/createAGame/gettingSetUp/#bundling-the-project-and-running-locally)” and running into an error in the browser:

> ReferenceError: require is not defined  
> at universalModuleDefinition:7:30  
> at universalModuleDefinition:1:1

My files do not directly contain `require`.

# Steps I took

- npm install --save-dev @babylonjs/core
- npm install --save-dev @babylonjs/gui
- npm install --save-dev typescript webpack ts-loader webpack-cli
- npm install --save-dev typescript webpack ts-loader webpack-cli
- npm install --save-dev html-webpack-plugin
- npm install --save-dev webpack-dev-server

And using `npm run build` followed by `npm run start` and navigating in browser to `http://localhost:8080/index.html`

The offending code appears to be

```auto
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("babylonjs"));
	else if(typeof define === 'function' && define.amd)
		define("babylonjs-gui", ["babylonjs"], factory);
	else if(typeof exports === 'object')
		exports["babylonjs-gui"] = factory(require("babylonjs"));
	else
		root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), ( __WEBPACK_EXTERNAL_MODULE__ 597__) => {
return 

```

On the line:

```
exports["babylonjs-gui"] = factory(require("babylonjs"));

```

I’ve tried various combinations of `module`, `target`, and `moduleResolution` in tsconfig.json, but still get the same error. What else can I try?

# Environment

I’m using termux on Android and have, I think, overcome the basic hurdles to run in a Chrome-based browser.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 11, 2025, 6:36pm UTC](https://forum.babylonjs.com/t/basic-development-setup-problem/61757/2 "2025-12-11T18:36:25Z")

</div>

Can you share your repo so that we can try locally ?

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [December 13, 2025, 8:08am UTC](https://forum.babylonjs.com/t/basic-development-setup-problem/61757/4 "2025-12-13T08:08:17Z")

</div>

I found the problem!

I am converting someone else’s relatively flat TypeScript code into a project using npm and webpack. I’m very new to setting up the build. I had retained the `<script>` tags of the original, and the `require` was within the imports. I was able to generate a functional test server with webpack by removing those lines from the HTML initialization:

```
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

```

I only need:

```
<script type="module" src="js/bundle.js"></script>

```

Now I’m trying to figure out why my bundle.js file is 22MB. Is that normal for a very basic Babylon project?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 13, 2025, 1:14pm UTC](https://forum.babylonjs.com/t/basic-development-setup-problem/61757/5 "2025-12-13T13:14:20Z")

</div>

This would be with instpector which brings all the files and all the projects in.

The way around it is [Babylon.js docs](https://doc.babylonjs.com/setup/frameworkPackages/es6Support)