Basic development setup problem

Questions
, , ,
1

I’m trying to follow “Getting Started” 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

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

2

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

4

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?

5

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

The way around it is Babylon.js docs

1 Like