Having problem with loading babylonjs using es6 module loading

[HoloLite]

Hello,

I have been using the amd/requires to load the babylonjs and it's been working just fine.

Today I tried to use the new es6 module loading, though I can make it works for my own module, I can't seem to load the babylonjs.

My TS module which imports babylonjs looks like this at the top

////

import 'babylon'  // this is the same format I use for amd loading

///

and chrome gave me error like this:  Uncaught TypeError: Failed to resolve module specifier 'babylon'.

Then I tried the following format ('./xxx.js') which works with my own module:

///

import './babylon.js'

///

and chrome gave me the following error: Uncaught TypeError: Cannot set property 'BABYLON' of undefined

If anyone has the es6 module loading working with babylonjs, please help! thanks.

 

[brianzinn]

have you read this: https://doc.babylonjs.com/features/npm_support
The main thing is the version of BabylonJS >= 3.1.0-alpha3.4.  The first import you have should work.

[HoloLite]

Thanks for the reply. What I was trying to do is a bit different from what was described in that doc section.

A few more data on my env:
- I am using 3.1.0-beta1.1.1
- In the tsconfig.json, compilerOptions.module is set to 'es6'

The es6 module loading term here implies 2 things:
- The dependency syntax at build/design time (the 'import'/'export' keywords etc)
- The actual module loading at run-time on the browser (thus completely eliminating the external loader like webpack, require etc)

The index.html loads my main component using <script type="module" src="./mymodule.js></script> tags.
As mentioned previously, I was able to make the browser es6-loads my own modules (w/o any external loaders), but get errors when loading babylonjs.

Here is some relevant link on the new es6 module loading:  https://jakearchibald.com/2017/es-modules-in-browsers/

[RaananW]

Hi HoloLite,

BabylonJS JavaScript file is built with es5 in mind, and is using UMD to expose the BABYLON namespace to AMD, CommonJS and Browser environments. 

Since the "export" keyword is not a part of the es5 specifications, it is being removed when compiling (transpiling, I know...) babylon to javascript. 

I will add a note for myslef to check if it is possible to combine all of those paradigms. but since we do intend to continue in-browser support, amd and commonJS, they will win the export-fight at the moment, if it's either es6 OR UMD.

[HoloLite]

Thanks Ranaan. FYI, the amd/requirejs works too for me. It would be great to have es6 native loading support in the future. Maybe 3.2?

[MrPancakes]

@RaananW if it has any bearing I also was looking in to using ES6 module export/import and ran in to the same issue. 

EDIT: ok it seems you are on top of it https://github.com/BabylonJS/Babylon.js/issues/3314

[RaananW]

More than on top, I would expect an initial testable version till the end of this week  

[MrPancakes]

2 hours ago, RaananW said:

More than on top, I would expect an initial testable version till the end of this week  

Very Nice, Will test it when you are ready 

[RaananW]

Just wanted to update - my last PR was a major step in the right direction. I will write a very detailed post after the next NPM push, which will probably be this Wednesday.