BabylonJs development in TypeScript with npm, AdcancedDynamicTexture undefined

DylanD · June 7, 2018

So I had made a scene in javascript and am now putting it all into typescript.

I am trying to use BABYLON.AdvancedDynamicTexture.CreateFullscreenUI("UI");

However I was getting an error: "Error: Cannot read property 'AdvancedDynamicTexture' of undefined"

It seems that this was a common problem up until a fix last September, this fix: https://github.com/BabylonJS/Babylon.js/issues/2569

I have tried putting this in all my .ts files

import * as BABYLON from "babylonjs";

import * as BABYLON from "babylonjs-gui"

with tsconfig.json:

"compilerOptions": {

"target": "ES6",

"module": "system",

"moduleResolution": "node",

"outDir": "js/build",

"rootDir": "./ts",

"noEmitOnError": true,

"types": [

"babylonjs",

"babylonjs-gui"

],

},

But, it gave me a new error much more generic:

Error: fetch error: 404 Not found

instantiating http://localhost:3000/babylonjs

loading http://localhost:3000/js/build/game.js

loading app

at fetch.js:37

so I went to the build folder and into the game.js and sure enough the first line is

/// <reference path="../node_modules/babylonjs/babylon.d.ts" />

this line then shows the error [js] File '../node_modules/babylonjs/babylon.d.ts' not found.

any ideas what to do?

Just noticed this happens even if I don't use Babylon Gui

DylanD · June 7, 2018

Pinging @RaananW

RaananW · June 8, 2018

Howdy,

I actually deployed an example of how to achieve that yesterday - http://doc.babylonjs.com/features/npm_support#example-of-a-webpack-project-using-babylon-modules

You cannot import to the same namespace. the AdvancedDynamicTexture is a part of the GUI package. you could do either:

import * as BABYLON from "babylonjs";

import * as GUI from "babylonjs-gui";

GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");

or the better way IMO:

import { AdvancedDynamicTexture } from "babylonjs-gui";

AdvancedDynamicTexture.CreateFullscreenUI("ui1");

As i dont know yout project setup, i cannot comment regarding the 404, but make sure you have both packages installed (no need to import typings, your IDE will do it for you), and that you import the namespaces correctly

DylanD · June 8, 2018

4 hours ago, RaananW said:
Howdy,

I actually deployed an example of how to achieve that yesterday - http://doc.babylonjs.com/features/npm_support#example-of-a-webpack-project-using-babylon-modules

You cannot import to the same namespace. the AdvancedDynamicTexture is a part of the GUI package. you could do either:
import * as BABYLON from "babylonjs";

import * as GUI from "babylonjs-gui";

GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");
or the better way IMO:
import { AdvancedDynamicTexture } from "babylonjs-gui";

AdvancedDynamicTexture.CreateFullscreenUI("ui1");
As i dont know yout project setup, i cannot comment regarding the 404, but make sure you have both packages installed (no need to import typings, your IDE will do it for you), and that you import the namespaces correctly

Hey! Thanks I will try this and get back to you!

Also thanks DeltaKosh for pinging.

DylanD · June 8, 2018

@RaananW Hello again. Sorry as I'm not very well versed in web development... yet. However is this a typo or did I miss something?

"

We will also add an html file with a canvas (index.html):

<!DOCTYPE html> <html> <head> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script src="dist/index.js"></script> </body> </html>

After adding index.ts we are ready to start developing.

"

You say "we will also add an html file with a canvas(index.html)", so I made a file and saved it as index.html, then immediately after you say "after adding index.ts we are ready to start developing".

Should I have saved the html file as a ts, or maybe should I have made my own ts folder?

Any ideas?

RaananW · June 8, 2018

index.ts is in the main folder. its content is explained a few lines after

DylanD · June 8, 2018

Thanks for the quick response, sorry I must have missed that somehow. I will keep you updated.

DylanD · June 8, 2018

Update:

I can't seem to get around "mode: "development" ", if I run npm run build then it gives me unexpected identifier error, if I add it to modules I get invalid configuration object, if I comment it out I get many errors one saying mode is not define, and if I add its own module.exports it underlines modules as an error.

Any ideas?

Sorry I need so much assistance.

RaananW · June 8, 2018

Hey Dylan,

this is actually a perfect test for the tutorial. I see now that the webpack code is missing a comma before the mode. it should be:

const path = require("path");

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    },
    mode: "development"
};

Would be great to know if you got stuck on any other step, so i can fix it

DylanD · June 8, 2018

Yea I will definitely let you know if I run into any other problems!

Speaking of that I just added the comma, and now I get a "module.exports = { unexpected identifier error"

should I have some kind of base then add your web packcode on top of that?

Thanks Raanan!

RaananW · June 8, 2018

Unknown identifier means there is something wrong in the javascript file. what is the file name? what is its exact content?

Also notice - i added the line:

const path = require("path");

DylanD · June 8, 2018

whoops yea I just copy pasted over it...

Successful build many warnings(only 3 actually), to be expected though, all of them were packages, cannon oimo etc.

Still no index.js though. Heres what I've got:

File Heirarchy:

babylon-webpackTest(

dist(

bundle.js

index.d.ts

)

node_modules()

index.html

index.ts

package-lock.json

package.json

tsconig.json

web pack.config.ts

)

Build Warnings and other text that came when I built it(npm run build with "build": "webpack"):

Asset Size Chunks Chunk Names
bundle.js 1.81 MiB main [emitted] main
index.d.ts 11 bytes [emitted]
[./index.ts] 755 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
+ 1 hidden module

WARNING in ./node_modules/babylonjs/babylon.js
Module not found: Error: Can't resolve 'cannon' in '/node_modules/babylonjs'
@ ./node_modules/babylonjs/babylon.js
@ ./index.ts

WARNING in ./node_modules/babylonjs/babylon.js
Module not found: Error: Can't resolve 'earcut' in '/node_modules/babylonjs'
@ ./node_modules/babylonjs/babylon.js
@ ./index.ts

WARNING in ./node_modules/babylonjs/babylon.js
Module not found: Error: Can't resolve 'oimo' in '/node_modules/babylonjs'
@ ./node_modules/babylonjs/babylon.js
@ ./index.ts

So its not creating an index.js I think when it builds right?

Any ideas?

RaananW · June 8, 2018

why, of course it does

Continue reading the tutorial, it is all explained there.

DylanD · June 8, 2018

I can't it says I need an index.js to continue and the build never made one.

RaananW · June 10, 2018

Yep, I see.

Is there a /dist/bundle.js file? If there is (there should be), do that -

Esit webpack.config.json, change bundle.js (6th line) to index.js and run build again

DylanD · June 13, 2018

Hey, sorry, I no longer need the web pack build, so I won't be able to work on it unless on my personal time so if I ever get to finish I will let you know how it goes.

But yes I did have a bundle.js file in the dist folder if I remember correctly. That probably would have fixed my last issue.

Thanks for your time I hope I can get back to you on this.

BabylonJs development in TypeScript with npm, AdcancedDynamicTexture undefined

Recommended Posts

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members