Babylon.js: Importing GUI - Image not defined

[Ericky14]

I get an error when importing from babylonjs-gui.

Image is not defined at Object.<anonymous> (/Users/ericky/Development/tenable-3d-cerebro/node_modules/babylonjs-gui/babylon.gui.min.js:3:1854)

[deltakosh]

Hello do you mind sharing the project files? I cannot repro

[Ericky14]

This is all I have in this single file. Removing/Adding the first line resolves/causes the error.

import * as GUI from 'babylonjs-gui';

export default class HexLabel {
  constructor() {
    console.log(GUI);
  }
}

"babylonjs": "3.1.0", "babylonjs-gui": "3.1.0",

If you look at the source code, var DOMImage = Image; is placed before Image can be defined.

[deltakosh]

Ok pinging @RaananW for investigation
Thanks a lot

[RaananW]

The Image (DOMImage = Image) is referencing the window.Image object. I need to check why you get the error message, but it is already defined for sure. Unless you are not using it in a browser.

How do you compile this?

[RaananW]

Oh, and just as a test, ould you add the "dom" library to your tsproject? In compilerOptions add:

"lib": [
            "dom",
            "es2015.promise",
            "es5"
        ]

[RaananW]

Ok, ran a few tests - The Image object doesn't exist in the node context, so running your js file using node will not work. If you want to get it to run (but not really use it) add the following at the beginning of your js file (before importing GUI):

global.Image = function () { };

If you want it to work (not tested!!):

npm install canvas

let Canvas = require('canvas');
global.Image = Canvas.Image;

But that's an overkill and will probably not work as expected anyhow.

[RaananW]

Closing, as it is not related to babylon itself, please reopen if it is not the case.

[Ericky14]

Thank you for the replies. Also, it's an es6 project, not a typescript. It's a react project with SSR, so it must likely failed because of that. I will do some testing and see if it works.

[x5engine]

this happen when used with SSR so Issue with SSR