[2.5.0-beta] After Canvas2D move BABYLON is undefined

[Swiftwork]

Hi,

I am unsure if this is a bug or incompatible with my setup, but I run the latest nightly build of Babylon.js 2.5.0-beta commit 3fe3372 using a repository I set up that fetches the latest preview build and allows me to install it through npm as a package. I am then using Webpack together with Typescript to import the library. I understand that this might not be the standard workflow, but it has been running smoothly for me until the Canvas2D refactoring. So down to the issue:

In a simple Javascript setup such as this using webpack for requires, CANVAS2D will fail to run due to the fact that BABYLON is undefined.

const BABYLON = require('babylonjs');
const CANVAS2D = require('babylonjs/babylon.canvas2d');
new CANVAS2D.Rectangle2D({})

First I thought it was that my requires were messed up, which turned out to be half true. Webpack had to provide the CANVAS2D module with the BABYLON module, by making the BABYLON module globally available.

new webpack.ProvidePlugin({
  BABYLON: 'babylonjs',
}),

However this wasn't the entire issue, due to the fact that the CANVAS2D module is also defined as BABYLON and the first lines of the code overwrite the globally available BABYLON variable with it's own declaration of BABYLON.

var BABYLON;
(function (BABYLON) {
  // ...
})(BABYLON || (BABYLON = {}));

Removing all var BABYLON; in the compiled code fixed my issues, but maybe it might be worth giving Canvas2D its own CANVAS2D module/namespace, if they are now to be treated as separate modules in the repository.

Regards

Swiftwork

[GameMonetize]

They are separated but still in the same namespace.

I'm not sure about the issue. This should work because the BABYLON global variable is overwritten only if BABYLON is not defined

[Swiftwork]

After some further investigation I figured out why the var BABYLON; was affecting the Webpack ProvidePlugin. I originally believed the plugin exposed a global variable, but what the plugin actually does is that it checks for usages of an alias such as BABYLON and then replaces each instance with the defined module require('babylonjs'); (requires are cached). What was happening in the example above was that BABYLON was never referenced before being assigned as a variable and therefore never aliased. A sneaky solution to this problem would be to add an instantiated checker the same way the other additions are added in gulp:

var dependencyAddition =
  'if (typeof BABYLON === "undefined")\n' +
    'throw "Canvas2D depends on BabylonJS, please include both files";\n' +
  '};\n';

That way there is a check to see if BABYLON exists and the ProvidePlugin will do its magic, while also providing a descriptive error handler in the event of a missed babylonjs import.

However after solving the above issue locally I seem to be running in to the issue that:

Uncaught TypeError: BABYLON.PropertyChangedInfo is not a constructor

caused by:

ObservableStringDictionary.pci = new BABYLON.PropertyChangedInfo();

This might be another issue with webpack, but it seems as if it doesn't know about new BABYLON.PropertyChangedInfo(); yet because it gets defined later on in the code.

I have been trying to figure out these issues for 3 days now and it is doing my head in. I hope I don't have to abandon Webpack for the project it has been running so smoothly so far. What setup do you guys use to include both canvas2d and babylonjs now after the refactoring?

Kind Regards

Swiftwork

[Nockawa]

@Swiftwork please ping me when you have issues with Canvas2D, don't spend so much time looking for the issue alone.

To be honest, the current state is not "fully tested/released" otherwise I would have made a post in the Canvas2D's main thread.

I've taken a quick look at the canvas2D.max.js and the PropertyChangedInfo type is defined AFTER the ObservableStringDictionary, that's why it crashes.

I take a look at the gulp compile right away and I'll let you know asap

[Swiftwork]

@Nockawa Haha to be fair it is in my nature to investigate bugs by myself, however long it takes. Too stubborn not to ^^. I will make sure to ping you personally in the future though regarding some of the things I find while using Canvas2d, which by the by is fantastic! Mind you though I might send a lot, but I'll try and keep it concise, clear and condensed

[Nockawa]

The issue is solved, however I can't update the compiled files into the "/dist/preview release" so you either have to

1) Take the new "/canvas2D/config.json" and build locally

2) wait that someone update the preview release.

I'll tell you for 2) as soon as it's made.

I'm truly sorry for the inconvenience, but I will soon make it up to you with a great feature incoming!

Here a preview:

[Nockawa]

1 minute ago, Swiftwork said:

@Nockawa Haha to be fair it is in my nature to investigate bugs by myself, however long it takes. Too stubborn not to ^^. I will make sure to ping you personally in the future though regarding some of the things I find while using Canvas2d, which by the by is fantastic! Mind you though I might send a lot, but I'll try and keep it concise, clear and condensed

As I said in the announcement post:

Quote

My mantra for this feature: by indulgent with the current state of the Canvas2D, but be fearless on the feedback side!

So all feedback is more than welcome. Keep in mind that right now I try to stabilize the lib as much as possible, I'm still open to features/enhancements but I will work on bug fixes in priority. New Features/enhancements will be taken in consideration with a great care for the sake of not bringing regression or new bugs. 

I'm focusing right now on the new GUI Library, based on Canvas2D.

 

[Swiftwork]

@Nockawa great as always. I don't mind waiting for a release and I'll report any bugs I discover

[Nockawa]

@Swiftwork the preview files are updated and looks like it works!