BJS4 Material + webpack import error

Bugs
1

Since version 4.0.0-alpha.19, the code in babylonjs-materials npm page:

import * as BABYLON from 'babylonjs';
import 'babylonjs-materials';

does not work when using with webpack. It will trigger a constructor undefined error in browser.
Example code:
package.json

{
  "name": "demo",
  "main": "demo.js",
  "scripts": {
    "build": "webpack --env.production true"
  },
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "babylonjs": "^4.0.0-alpha.16",
    "babylonjs-materials": "^4.0.0-alpha.16"
  }
}

webpack.config.js

module.exports = function(env) {
  return {
    entry: {
      demo: 'demo.js'
    },
    resolve: {
      extensions: ['.js'],
      modules: ['.', 'node_modules'],
    }
  };
};

demo.js

import * as BABYLON from 'babylonjs';
import 'babylonjs-materials';

var scene = new BABYLON.Scene(new BABYLON.NullEngine());
var waterMaterial = new BABYLON.WaterMaterial('w',scene);

index.html

<!doctype html>
<html><head><script src="dist/demo.js"></script></head></html>

I found that changine demo.js to this works:

import * as BABYLON from 'babylonjs';
import {WaterMaterial} from 'babylonjs-materials';

var scene = new BABYLON.Scene(new BABYLON.NullEngine());
var waterMaterial = new WaterMaterial('w',scene);
2

Pinging our expert for moduels @sebavan

3

What happens is your variable BABYLON conflicts with the namespace BABYLON.

The materials are actually not augmenting the BABYLON variable which is local to your code but only the namespace typings.

I have fixed the documentation a couple of months ago: NPM - Babylon.js Documentation

as the code should not have work before (Materials is not a side effect of local BABYLON variable and should not be).

So what you are experiencing is expected but I am open to any ideas to make it clearer in the doc ?

4

Oh yes, doc on BJS site is correct. But the instructions on the npm repo page are not changed. I see the new ES6 npm repo in v4 change list，but I don’t know that import synatax is also changed in the old npm repo.

5

Good point, we have to make sure to fix the readme in the npm repo page :slight_smile: