We are running a project in an Ionic/Angular app, imported from Editor v4.0.2 and it seems we have a compilation problem when trying to run a script in our app:
TypeError: Class constructor MyScript cannot be invoked without 'new'
at requireScriptForNodes (tools.ts:71)
at attachScripts (tools.ts:220)
at MapPage.<anonymous> (index.ts:21)
at Generator.next (<anonymous>)
at tslib.es6.js:74
at new ZoneAwarePromise (zone-evergreen.js:960)
at __awaiter (tslib.es6.js:70)
at MapPage.runScene (index.ts:19)
at Observer.callback (babylon-page-directive.ts:96)
at Observable.push.ps+7.Observable.notifyObservers (observable.js:288)
at resolvePromise (zone-evergreen.js:798)
at new ZoneAwarePromise (zone-evergreen.js:963)
at __awaiter (tslib.es6.js:70)
at MapPage.runScene (index.ts:19)
at Observer.callback (babylon-page-directive.ts:96)
at Observable.push.ps+7.Observable.notifyObservers (observable.js:288)
at Scene.push.tVVT.Scene._checkIsReady (scene.js:1646)
at scene.js:1657
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27546)
Is this a known limitation or are we doing something wrong?
Thanks by advance and sorry for my first post being an annoying one!
Ps: kudos for the amazing work on the whole babylon js project
Thanks for quick answer! I heard about the legend Something tells me he could have some ES6 under the hat or some info… We thought about adapting the ScriptMap call method to ES6 in tools.ts, but not sure how as this looks like a whole JS engine for node management, of pretty high level… We are just simple mortal guys trying to make fun scripts for the kids (in a 2d/3d responsive map showing the exercices of our educational app)
Hi @jim-decocq !!!
You are right, I already seen this error in other projects and it was due to some code written in ES5 mode trying to instancing some ES6 code. I’m fixing a problem I have for the support of basis files in the Editor and I’ll try to fix this problem at the same time.
In the tools.ts, the script is instantiated by calling the constructor binded to the context of the node which has the script attached to (like script.constructor.call(nodeInstance)). This is not possible anymore when a class is declared in ES6 mode with the “class” keyword. I’m looking for some resources and will fix ASAP!
@jim-decocq to be sure, in the tsconfig you have in your workspace, is the “target” property in compilation options equal to “ES6” ? If yes, can you set it to ES5 just to test ?
Hi! Great news if you’re on it already! Yes we’re in ES6 in the angular project and we tried switching it to ES5 but we’ve got way too much arrow methods and ES6 stuff for this solution to be viable.
Let us know if we can do something on our side to help you, like bug reports or else. Speaking of bug reports / questions, should we post here in the corresponding section or on the editor’s repo issues section?
I have tried multiple ideas and I need to review (with breaking changes for sure) the way to attach scripts in the Editor to support ES6 JavaScript classes.
Do you use the tsconfig.json file generated by the Editor template to transpile your Angular files?
Are you using pure JS when developing your Angular App ?
In other words, are your angular app and the editor project merged into only one project ? I mean sharing the same tsconfig.json file, same webpack config etc.
I have tried to instantiate a game (the class named “Game”) from an ES6 class where all the editor’s files (scripts, tools, etc.) were transpiled into ES5. Is there a way in your project to distinguish the angular app compilation stage and the one from the editor ? This would allow to avoid rewriting your angular app
The project is an ionic angular 2+ one in typescript es6. We use the same project and we merge ts file from babylon editor and angular.
So it’s the same config.ts and webpack from angular.
We can’t downgrade angular ionic to es5.
A bad solution would be to instantiate all script classes and apply them to each corresponding scene mesh with a call but it can be really heavy.
Or include babylon project like an external library but we loose direct binding possibility from angular.
I have tried to use babel rc file to locally transpile in es5 but not conclusive perhaps i’m doing it wrong.
The purpose was to drop in the babylonEditor ts files and use them without modifying their content but conceptually i don’t know a way to mutate an already instantiated class from another in a generic form on es6.
If you need more info or want to discuss more directly with him (he’s french) I can give you his phone contact via pm. Will maybe be more convenient for you as I’m only the messenger here (more frontend oriented) and he turned the problem upside down like you, finding different tracks for potentially solving it but I couldn’t explain which ones the right way
