Upgrading Babylon 4 to 6 - Extending ES6 classes

Questions
1

I’m currently in the process of upgrading a large Typescript project that used Babylon 4.2 to Babylon 6.18. I’ve worked though various compiler errors, but I now get the runtime error

Uncaught TypeError: Class constructor TargetCamera cannot be invoked without 'new'

That relates to this class, which extends TargetCamera

export class CustomFollowCamera extends TargetCamera {
    constructor(name: string, position: Vector3, scene: Scene, lockedTarget: AbstractMesh) {
        super(name, position, scene);
        //...
    }
}

From some research this seems to be because my tsconfig targets ES5 but I’m extending an ES6 class. I guess this previously wasn’t a problem as 4.x imports were ES5?

I have several classes in the app that extend Babylon classes.

My next thought was to target ES6 instead, but this breaks all the older Bootstrap Javascript that’s being used in the app. Updating or replacing every ES5 library used to ES6 versions would extend the scope of this upgrade substantially, although its something we’ll tackle eventually.

Does anyone have any suggestions for a workaround before I try to rework all of these classes to use composition rather than inheritance?

2

Adding @RaananW but I think the simplest would be to target es6 in your TS build and then transpile back to es5 with a solution like babel.

3

what is the reason for targeting ES5?

Our ES6 packages used to target es5 until 5.21.0. This has caused different issues with people who actually were trying to use es6 classes, so we moved the es6 packaes to, well, es6 :slight_smile:

As we guarantee backwards compatibility, our UMD version is targeting ES5 and will forever target ES5, so one way of solving this is to use our UMD version, but of course agree that tree-shaking will not be supported. Otherwise, seb’s suggestion is correct - target es6 (or even es2018) and transpile down to es5.

But again - why es5? what systems are you supporting that don’t have es6 functionality?

4

Thanks for the reply. It’s definitely our goal to move to ES6 eventually. This is corporate software that’s been neglected. Currently we have several jQuery and Boostrap (3!) components that won’t work when targeting ES6. These need to be upgraded or replaced in some cases, but that will suck up time and I’m trying to keep the scope of the upgrade down to meet a deadline :neutral_face: and do things in phases.

Thanks both of you (@sebavan) for the input. I’ll try Babel, I might be able to keep things simple and just rewrite these classes to not extend, and I’m now clear that the eventual solution is use only libraries that are ES6 compatible.

1 Like
5

If you’re attempting to upgrade your code base as a whole, and upgraded ts/babel, you can get that error. See https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier for an explanation. Scroll down a little. While ts didnt make breaking changes, babel did. Dont remember what the corresponding babel config is, it may just be legacy decorators, but i think there was a change to initialized values in the constructor, which can cause that error.