I have 3 files, which look like this:
util/index.ts
export * from './Vector2'
export * from './Sprite'
export * from './GameObject'
export * from './Component'
util/Component.ts
export interface ComponentType<T extends Component> {
new(gameObject: GameObject): T;
}
export class Component { }
components/Rigidbody.ts
import { Component } from '../util'
export class Rigidbody extends Component { }
Everything works fine in the editor, and when the code compiles into javascript. However, when I run the code in the browser, I get the error:
Uncaught TypeError: Class extends value undefined is not a constructor or null
Which is referring to export class Rigidbody extends Component
If I change my import to import the Component file instead of the index file it works:
import { Component } from '../util/Component'
I also have a Transform file that imports the Component file, and that one does the same thing.
Is there something I am doing wrong or is it the way I am building it with webpack?
Here is my webpack file:
const path = require('path')
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
PIXI: path.join(__dirname, 'node_modules/pixi.js/lib/index.js')
}
},
output: {
libraryTarget: 'var',
library: 'phoenix',
filename: 'phoenix.js',
path: path.resolve(__dirname, 'dist')
}
};