I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors.
The problem arises in my main entry file (main.ts) with these initial lines:
require('./core/Obj');
require('./core/Component');
While the build process runs smoothly, executing the code results in an error specifically related to the second require statement:
Uncaught TypeError: Class extends value undefined is not a function or null
core/Obj.ts
namespace GameEngine {
export class Obj {
// Includes some functions/methods
}
}
core/Component.ts
namespace GameEngine {
export class Component extends Obj {
}
}
Following compilation, the code snippet looks like this:
(function (exports, require, module, __filename, __dirname, process, global) { (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[
function(require,module,exports){
var GameEngine;
(function (GameEngine) {
class Component extends GameEngine.Obj { // The error occurs here
}
GameEngine.Component = Component;
})(GameEngine || (GameEngine = {}));
},{}],
5:[function(require,module,exports){
var GameEngine;
(function (GameEngine) {
class Obj {
}
GameEngine.Obj = Obj;
})(GameEngine || (GameEngine = {}));
},{}]
});
Below is the gulp task that I am executing:
gulp.task('compile-engine', function () {
return browserify()
.add('./GameEngine/main.ts')
.plugin(tsify, {})
.bundle()
.on('error', function (error) { throw error; })
.pipe(source('gameEngine.js'))
.pipe(buffer())
.pipe(gulp.dest('build/'));
});