Stencil JS not working with non-default imports

Question

I'm using BabylonJS in a StencilJS app, and I can only seem to import in a very specific way.

For instance I can't do:

import { Engine, Scene } from "babylonjs";

It says 'Engine' is not exported by node_modules\babylonjs\babylon.js But it is..

I can do:

import BABYLON from 'babylonjs';

and use it like

private _scene: BABYLON.Scene;

I'd like for the former to work. Any advice?

The first way is how most tutorials do it, and I refuse to believe SencilJS is just not capable of that. I must be missing something

Seems similar to fixed issues like here https://github.com/BabylonJS/Babylon.js/issues/4391 — SeanMC, Aug 25 '19 at 21:21
@SergeyMell I was using babylon 3.3 Apparently this normally works there. However, after upgrading to 4.x, I am able to do imports a bit more like I would expect here. Although barely, https://doc.babylonjs.com/features/es6_support#installing-babylonjs — SeanMC, Aug 25 '19 at 22:06
Sorry, I didn't get in what exactly you had gotten an issue. Could you provide package.json of your project? At least some kind of short version — Sergey Mell, Aug 26 '19 at 19:46

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

BabylonJS is provided in two versions (ES5 and ES6). The issue you are referring to is related to ES5 version of package.

If you do smth like this in your code

import * as babylon from 'babylonjs';
console.log(babylon);

and look into the console, you will see next:

{default: Module, __moduleExports: Module, babylonjs: undefined}

That's why decomposition is not working, it's not an object that can be serialized the way you expect.

In documentation they say

import { Engine, Scene } from 'babylonjs';

NOTE: if you can't make this import method to work, go to the section on typescript and webpack below.

However, I failed to make it work for ES5 version. The correct way, as to me would be to use ES6 version of package, which can be installed as

npm install -S @babylonjs/core

This version allows you to use ES6 packages together with tree shaking and other useful features.

Your module import, in this case, would look exactly as you wish:

import {Engine, HemisphericLight, Mesh, Scene} from '@babylonjs/core';

Here is a small example I've done to prove my words.

Please, let me know if I got you wrong and you expected to have smth different or you need some additional explanations or materials - I'll be happy to assist.

Stencil JS not working with non-default imports

1 Answers1