Extends class from different folder

[bthachdev]

I'm using https://github.com/lean/phaser-es6-webpack for our company projects.

Currently, we separate code into different projects, a framework and games using it.

 

But when we trying to extends class from our framework using relative path, ex:

import Sprite from "../../Framework/src/Sprite"

class GameSprite extends from Sprite

 

we get this error: Uncaught TypeError: Class constructor  cannot be invoked without 'new'

[mattstyles]

3 hours ago, bthachdev said:

class GameSprite extends from Sprite

This syntax is not es2015, try:

class GameSprite extends Sprite {
  foo () {
    console.log('hello')
  }
}

Although the error message suggests the error is elsewhere, possibly when you try and use GameSprite. Whats the line number on the error? And the corresponding line in your code?

[bthachdev]

that is just a typo in my post,  I use "class GameSprite extends Sprite", too

Maybe problem because I access code from another project ? and how to solve that problem ?

 

[mattstyles]

There's a simple test if you're worried about access issues:

import Sprite from '../../path/to/code'

console.log(Sprite)

But the error simply implies that you're trying to invoke the constructor rather than call new (which can be indicative of an issue using classes, but to each their own), if, for example, you're using:

var gs = GameSprite()

You'll get that error.

There should be a line number on the error, what does your code look like for that line?

[bthachdev]

import Sprite from '../../path/to/code'

class GameSprite extends Sprite {
  constructor() {
    super();
  }
}

and then in main.js, I call

let gameSprite = new GameSprite();

and get this error: Uncaught TypeError: Class constructor  cannot be invoked without 'new'  

Seem like GameSprite cannot extends from Sprite

Note: our framework and our game is 2 different projects (using Phaser and ES6)

[mattstyles]

It doesn't matter that they are different projects, when you use the constructor it will invoke a new instance of the extended class when you call super, for example, the following works on the pixi examples page:

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
//var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
var tex = PIXI.Texture.fromImage('required/assets/basics/bunny.png')
class GameSprite extends PIXI.Sprite {
  myMethod () {
    console.log('hello')
  }
}

var bunny = new GameSprite(tex)

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.rotation += 0.1 / delta;
});

Whats the stack trace for the error? Does it definitely refer to the 'new GameSprite` line or to something else that game sprite maybe calls?

[bthachdev]

This is the error:

Uncaught TypeError: Class constructor  cannot be invoked without 'new'
    at new GameSprite (main.js:390)
    at new ClientGame (main.js:407)
    at Object.<anonymous> (main.js:415)
    at __webpack_require__ (bootstrap 5388c16…:52)
    at Object.<anonymous> (Transporter.js:135)
    at __webpack_require__ (bootstrap 5388c16…:52)
    at webpackJsonpCallback (bootstrap 5388c16…:23)
    at bundle.js:1