cannot import BabylonJS 3.0 Canvas2D (ES6)

[brianzinn]

Latest NPM for BabylonJS 3.0 alpha includes Canvas2D!  I am having difficulty importing Canvas2D into my project.  I have no troubles at all with regular BabylonJS only with importing Canvas2D.

// I can import the main babylonJS in a variety of ways and they all work.
// explicit imports
import { Sound, Mesh, ShadowGenerator, ...  } from 'babylonjs'

// default and named
import BABYLON, { Sound, Mesh, ShadowGenerator, ...  } from 'babylonjs'

// tried also named default only and *

After that I am importing the Canvas2D and have tried various ways.

// named default import
import Canvas2D from 'babylonjs/babylon.canvas2d'
// as side-effect
import from 'babylonjs/babylon.canvas2d'
// explicit imports
import { ScreenSpaceCanvas2D } from 'babylonjs/babylon.canvas2d'

The error I am getting is "TypeError: Cannot read property 'Effect' of undefined".  So, basically line 1 of babylon.canvas2d, where BABYLON is undefined.  Removing those will fail later (ie: BABYLON.Vector2 being undefined).  I was reading on the ES6 spec that there is no guarantee of ordering only that the imports will all be run before code is executed.

I looked through other NPMs where I can import add on modules separately and they have extra declarations in package.json (ie: "jsnext:main": "index", "module": index") and they are exporting explicitly in index.js the other modules from the main project.  I tried that and a few other things, but am unable to get Canvas2D to import unfortunately.

If anybody has successfully imported BabylonJS without creating their own bundle any tips would be appreciated.  I'm using webpack and babel (https://babeljs.io/).

[GameMonetize]

Can you try to add this at the end of Canvas2d.js:

 

if (((typeof window != "undefined" && window.module) || (typeof module != "undefined")) && typeof module.exports != "undefined") {
    module.exports = BABYLON.Canvas2D;
};

[brianzinn]

I did see that mentioned elsewhere in the forum and had already tried it.  Adding that to the end of Canvas2d, I was still unable to get it working on npm 3.0 version.  Doesn't seem to matter how I import that everything is undefined. Thanks for the tip.

I'll probably come back to this when my game is further along, since it feels like my wheels are spinning trying to get Canvas2D going.  Maybe by then somebody will have figured it out or I can invest the time in getting the canvas to export as a PR.  Cheers.  

 

 

 

 

[GameMonetize]

I'm interested by this as I would like to add what is missing to make it works

[thrice]

I was getting bit hard by this issue the other night, I eventually got it resolved by:

1. Not exposing BABYLON on the window. It seems like when I was exposing babylon on the window in my webpack config, i.e.

` {test: /babylonjs\/babylon.js$/, loaders: ['expose?BABYLON']}`

It was loading a different instance of the BABYLON library, from when I would

`import BABYLON from 'babylon';`

- It may have been related to the fact that I am building an angular-babylon wrapper, which I had partially abstracted into a package, which was including BABYLON as a dependency. - Or it was just, exposing BABYLON on the window was causing it to be duplicated, not 100% sure, but, here are some steps you can try to fix

1. try removing expose if you are exposing BABYLON in your config, and add this instead:

```

        {test: /babylonjs\/babylon.js$/, loaders: ['exports?BABYLON']},
        {test: /babylonjs\/babylon.canvas2d.js$/, loaders: [ 'imports?BABYLON=babylonjs/babylon']},

```

(the above is exposing the babylon library specifically to the canvas 2d lib, when it encounters the import "babylonjs/babylon.canvas2d" statement below)

2.  make sure you are not exposing BABYLON on the window.

3. I replaced all occurrences of

```import BABYLON from 'babylonjs';```

With:

```import BABYLON from 'babylonjs/babylon';```

(Not 100% sure the above is actually necessary, but burned entire night trying to fix and eventually got it working so didn't care to ask further questions)

4. in your main js, or dependencies importing file, make sure to import babylon lib/Canvas2D once, i.e.

```

import "babylonjs/babylon";
import "babylonjs/babylon.canvas2d";

```

[thrice]

Sorry forgot code fences not supported, ^ syntax would be nice for parity with Github  

Easier to read version, too lazy to reformat here

https://gist.github.com/jasonayre/69e71e2c1b7cafe8333f9b68906c4671