Error TS2304 Cannot find name 'WebGLObject'

Hey there, I need help with my unity setup.
I’ve got a new pc, so it’s the second time that I installed babylon.js and node.js for my unity projects.
I’ve done all steps and yes, I installed TypeScript Command and detected it in the babylon.js exporter to script compilation options.

I can’t export the project using the play button, there’s a “Build Failed” message. The errors are: “Assets/Babylon/Library/babylon.d.ts (56920,30): error TS2304: Cannot find name ‘WebGLObject’. Assets/Babylon/Library/babylon.d.ts (56926,32): error TS2304: Cannot find name ‘WebGLObject’”

and "Failed to compile project script files UnityEngine.Debug:LogError(Object)

The problem is in existing projects and also in new unity projects.
I’m working with Unity 2019.3.9f1, Babylon Toolkit Version 4.0.0 and I installed node.js 14.17.0 LTS.

Can anyone help?

I think your problem is similar to Vite + Rollup production build "TS2304: Cannot find name 'WebGLObject'"
Hope it will help :slight_smile:

2 Likes

I think this is a TypeScript issue… I think they took out WebGLObject in TypeScript 4.3… Try installing

npm install -g typescript@4.0.2 on your machine.

BTW… that version of the Toolkit and Unity Editor 2019 is no longer supported.
You should be using the new GLTF based toolkit which requires Unity 2020.1 Or Greater. I might not be able to help issues in the old toolkit.

Also i think the newer babylon.d.ts does not use WebGLObject anymore. @Deltakosh was gonna get rid of that… I think

3 Likes

already done :wink:

Thx, now it works :slight_smile:

Is there any way to work around this for someone using Babylon as a dependency via npm?

Or is it necessary to downgrade typescript until Babylon publishes a new version?

Edit: never mind, I see now that 5.0 alpha versions are on npm:

"@babylonjs/core": "5.0.0-alpha.25"
1 Like

Thanks! It is the best solution for me because I do not want to use “5.0.0-alpha”; I want to use the stable 4.2.0 version of Babylon.js. But I deleted the 4.3.5 version of TypeScript before installing the 4.0.2 version of TypeScript like this:

npm uninstall typescript -g

Maybe it is unnecessary to delete it before installing the old one but okay.

Just simple example with GLB loading and Skybox in Playground: Plunker - Gates. Babylon.js. TypeScript

Source Code: GitHub - 8Observer8/load-glb-babylonjs-ts

tsconfig.debug.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": true,
        "types": [
            "babylonjs",
            "babylonjs-loaders",
            "babylonjs-gltf2interface",
            "requirejs"
        ],
        "lib": [
            "DOM",
            "ES2015"
        ]
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "../public/js"
    },
    "include": [
        "../src/client/**/*.ts"
    ]
}

package.json

{
  "name": "load-glb-babylonjs-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "tsc -p tsconfigs/tsconfig.debug.json",
    "compile": "tsc -p tsconfigs/tsconfig.release.json",
    "bundle": "browserify public/js/main.js -o public/js/bundle.js",
    "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
    "release": "npm run compile && npm run bundle && npm run minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babylonjs": "^4.2.0",
    "babylonjs-loaders": "^4.2.0",
    "requirejs": "^2.3.6"
  },
  "devDependencies": {
    "@types/requirejs": "^2.1.32"
  }
}

requireConfig.ts

requirejs.config({
    baseUrl: "js",
    paths: {
        "babylonjs": "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon",
        "babylonjs-loaders": "https://cdn.jsdelivr.net/npm/babylonjs-loaders@4.2.0/babylonjs.loaders.min"
    }
});

requirejs(["main"], () => { });

main.ts

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

function createScene(): BABYLON.Scene
{
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    const engine = new BABYLON.Engine(canvas, true);
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera("RotateCamera", 100 * Math.PI / 180, 70 * Math.PI / 180, 15,
        new BABYLON.Vector3(0, 0, 0), scene);
    camera.wheelPrecision = 100;
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
    const assetPath = "https://dl.dropboxusercontent.com/s/735ww173uc2t6bh/";
    BABYLON.SceneLoader.Append(assetPath, "gate.glb", scene, (scene) => { });

    const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, scene);
    skybox.infiniteDistance = true;
    const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
    skyboxMaterial.backFaceCulling = false;
    const files = [
        "https://dl.dropboxusercontent.com/s/d6pb1vco30tb1qd/skybox_px.jpg",
        "https://dl.dropboxusercontent.com/s/j8r319homxctq46/skybox_py.jpg",
        "https://dl.dropboxusercontent.com/s/owtkos3hjayv819/skybox_pz.jpg",
        "https://dl.dropboxusercontent.com/s/fn49xqtrz18h6vn/skybox_nx.jpg",
        "https://dl.dropboxusercontent.com/s/jdtd2cgpe13930o/skybox_ny.jpg",
        "https://dl.dropboxusercontent.com/s/shin4itwifrypl5/skybox_nz.jpg",
    ];
    skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    engine.runRenderLoop(
        () =>
        {
            scene.render();
        });
    window.onresize =
        () =>
        {
            engine.resize();
        };
    return scene;
}

function main()
{
    createScene();
}

// Debug
main();

// Release
// window.onload = () => main();

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Hello App</title>

    <link rel="stylesheet" href="css/style.css">

    <!-- Debug -->
    <script data-main="js/requireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>

<body>
    <canvas id="renderCanvas"></canvas>
</body>

</html>

style.css

html, body {

    overflow: hidden;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

#renderCanvas {

    touch-action: none;

    width: 100%;

    height: 100%;

}

Cross referencing my response for anyone who still wants to use BabylonJS@4.2 with Typescript@latest.