solved Webpack and Babylon - babylonjs-loaders and debugLayer problem

[maecky]

Hi,

I am trying to build a boilerplate with webpack, webpack-dev-server, babel and the latest babylonjs.

The versions I am working with:

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "copy-webpack-plugin": "^4.2.0",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {
    "babylonjs": "^3.1.0-alpha3.7",
    "babylonjs-loaders": "^3.1.0-alpha3.7"
  }

 

If I just import babylonjs like

import * as BABYLON from 'babylonjs';

everything is working fine with the exception of the debugLayer :

babylon.inspector.bundle.js:408 Uncaught ReferenceError: BABYLON is not defined
    at INSPECTOR (babylon.inspector.bundle.js:408)
    at Object.<anonymous> (babylon.inspector.bundle.js:408)
    at __webpack_require__ (babylon.inspector.bundle.js:21)
    at Object.<anonymous> (babylon.inspector.bundle.js:49)
    at __webpack_require__ (babylon.inspector.bundle.js:21)
    at babylon.inspector.bundle.js:41
    at babylon.inspector.bundle.js:44
INSPECTOR @ babylon.inspector.bundle.js:408
(anonymous) @ babylon.inspector.bundle.js:408
__webpack_require__ @ babylon.inspector.bundle.js:21
(anonymous) @ babylon.inspector.bundle.js:49
__webpack_require__ @ babylon.inspector.bundle.js:21
(anonymous) @ babylon.inspector.bundle.js:41
(anonymous) @ babylon.inspector.bundle.js:44
babylon.max.js:68601 Uncaught TypeError: Cannot read property 'Inspector' of undefined
    at DebugLayer._createInspector (babylon.max.js:68601)
    at HTMLScriptElement.script.onload (babylon.max.js:6195)

 

I read in another post (link below), that babylon and its modules should be webpack compatible. I tried to import 'babylonjs-loaders' but it resulted in a warning and therefore doesn't work.

 

Tried to import:

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

 

Error:

./node_modules/babylonjs-loaders/babylonjs.loaders.min.js
Module not found: Error: Can't resolve '../babylon.max' in 'D:\Projects\JS\webpack\bab\node_modules\babylonjs-loaders'
 @ ./node_modules/babylonjs-loaders/babylonjs.loaders.min.js 1:82-107
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

 

Had someone the same issues and knows how to solve them?

If you need any further info, let me know.

Thanks

[RaananW]

Hi!

So, regarding the error - this is a warning, and webpack lets you compile everything correctly. I use it on a daily base, and never experienced a problem with it. Having said that - I am working on fixing this warning (This was added for the local dev team, and is shown as a warning, since webpack simply replaces all "require" with its code, disregarding the fact that it is never ever used.)

Abou the debug layer - this is a half-known bug. The debug layer is counting heavily on the BABYLON global namespace. I will see if I manage to solve this until 3.1 is out, but until then, here is the magic line of code that will make it work:

// A small hack for the inspector. 
import * as BABYLON from 'babylonjs';
window['BABYLON'] = BABYLON;

Hope this helps!

[maecky]

The debug layer is working now and I can also import STL files.

Thank you very much for your fast reply, this really helped!

 

[ziguri]

Is this issue probably back in the current version babylonjs 3.2.0-rc.1?

 

[RaananW]

Hi @ziguri,

 

would be great to know your setup and what error you see, in order to understand if the problem returned or not.

[ziguri]

Hi @RaananW

I do have the following packages installed

"dependencies": {
"babylonjs": "^3.2.0-rc.1",
"babylonjs-gui": "^3.2.0-rc.1",
"babylonjs-loaders": "^3.2.0-rc.1",
"handjs": "^1.3.11"
},

 

If i try to show the debugLayer with scene.debugLayer.show() i do get several errors:

(this is just an excerpt of my errors)

As described above - adding the following lines solved my issue:

declare var window: {
[key:string]: any; 
prototype: Window;
new(): Window;
}
window['BABYLON'] = BABYLON;

Tell me if you need further information.

 

[RaananW]

Howdy,

I will check that. Using the UMD package, the global object (in your case the window) has BABYLON assigned. Actually, especially for that. Would you be able to explain how you build and execute your code? I am especially interested in the VM135 to VM138 that are presented next to the inspector, but not next to vendor.js . 

Another solution should also be to include the inspector package.

[ziguri]

Please find my webpack.production.config.js and my package.json attached.

webpack.production.config.js

package.json