webpack build: Class extends value undefined

Viewed 684

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')
  }
};
0 Answers
Related