Jump to content

cannot import BabylonJS 3.0 Canvas2D (ES6)


Recommended Posts

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/).

Link to comment
Share on other sites

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. :) 





Link to comment
Share on other sites

  • 1 month later...

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';```


```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";


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...