`packages/tools/sandbox` fails to build at the current tip of `master`

Questions
,
1

Hi,

I just attempted to build and run the sandbox app locally. I intend to host a customized version of that to improve designers’ productivity as they design a space.

I’ll paste the full output from my attempt below verbatim, but here is a quick summary:

  • npm i succeeded at the root of Babylon.js repo. That built some build tools, etc, as intended.
  • cd packages/tools/sandbox && npm run build then failed with 13 compilation errors (see lines 100~170 in the full output below)
  • That’s it. Revision 4dccd6a96f (current tip of master), x86_64 GNU/Linux, node version 20.x, npm version 10.x.

This isn’t expected, is it?

–
Seva

Full output:

[dev]$ git clone git@github.com:BabylonJS/Babylon.js.git bjs
Cloning into 'bjs'...
remote: Enumerating objects: 307388, done.
remote: Counting objects: 100% (13340/13340), done.
remote: Compressing objects: 100% (437/437), done.
remote: Total 307388 (delta 13099), reused 12903 (delta 12903), pack-reused 294048
Receiving objects: 100% (307388/307388), 1.09 GiB | 19.33 MiB/s, done.
Resolving deltas: 100% (230431/230431), done.
Updating files: 100% (4323/4323), done.
[dev]$ cd bjs
[bjs]$ git rev-parse --abbrev-ref HEAD
master
[bjs]$ git rev-parse HEAD
4dccd6a96fd65a388b466ef039bf9ee3c6e8fcfc
[bjs]$ uname -a
Linux laptop 6.5.9-1-MANJARO #1 SMP PREEMPT_DYNAMIC Wed Oct 25 13:14:27 UTC 2023 x86_64 GNU/Linux
[bjs]$ node --version
v20.9.0
[bjs]$ npm --version
10.2.1
[bjs]$ npm i --nosave

> @babylonjs/root@1.0.0 prepare
> ts-patch install -s && npm run build:tools && npm i @dev/build-tools -D && npm run build:assets && npm run build:test-tools


> @babylonjs/root@1.0.0 build:tools
> npm run build -w @dev/build-tools && npm run build -w eslint-plugin-babylonjs


> @dev/build-tools@1.0.0 build
> npm run compile


> @dev/build-tools@1.0.0 compile
> tsc -b tsconfig.build.json


> eslint-plugin-babylonjs@1.0.0 build
> tsc -b tsconfig.build.json


changed 1 package, and audited 2634 packages in 3s

337 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> @babylonjs/root@1.0.0 build:assets
> build-tools -c pa --global

Babylon.js build tools
Command: pa
Processing assets from ./packages/**/*/src/**/*.+(png|jpg|jpeg|gif|svg|scss|css|html|json|fx)

> @babylonjs/root@1.0.0 build:test-tools
> npm run build -w @tools/test-tools


> @tools/test-tools@1.0.0 build
> npm run clean && npm run compile


> @tools/test-tools@1.0.0 clean
> rimraf dist && rimraf *.tsbuildinfo


> @tools/test-tools@1.0.0 compile
> tsc -b tsconfig.build.json


> @tools/test-tools@1.0.0 postcompile
> node scripts/copyDeclaration.js


changed 171 packages, and audited 2634 packages in 20s

337 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
[bjs]$ cd packages/tools/sandbox/
[sandbox]$ npm run build

> @tools/sandbox@1.0.0 build
> npm run clean && npm run compile


> @tools/sandbox@1.0.0 clean
> rimraf dist


> @tools/sandbox@1.0.0 compile
> tsc -b tsconfig.build.json

src/globalState.ts:13:58 - error TS2307: Cannot find module 'loaders/glTF/index' or its corresponding type declarations.

13     public glTFLoaderExtensions: { [key: string]: import("loaders/glTF/index").IGLTFLoaderExtension } = {};
                                                            ~~~~~~~~~~~~~~~~~~~~

src/globalState.ts:30:31 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

30             this.currentScene.debugLayer.show();
                                 ~~~~~~~~~~

src/globalState.ts:37:31 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

37             this.currentScene.debugLayer.hide();
                                 ~~~~~~~~~~

src/components/renderingZone.tsx:7:32 - error TS2307: Cannot find module 'loaders/glTF/glTFFileLoader' or its corresponding type declarations.

7 import { GLTFFileLoader } from "loaders/glTF/glTFFileLoader";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/renderingZone.tsx:99:102 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

99                     this.props.globalState.isDebugLayerEnabled = this.props.globalState.currentScene.debugLayer.isVisible();
                                                                                                        ~~~~~~~~~~

src/components/renderingZone.tsx:102:37 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

102                         this._scene.debugLayer.hide();
                                        ~~~~~~~~~~

src/components/renderingZone.tsx:301:23 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

301                 scene.debugLayer.show();
                          ~~~~~~~~~~

src/components/renderingZone.tsx:302:23 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

302                 scene.debugLayer.select(texture, "PREVIEW");
                          ~~~~~~~~~~

src/components/renderingZone.tsx:375:75 - error TS2307: Cannot find module 'loaders/glTF/index' or its corresponding type declarations.

375                 loader.onExtensionLoadedObservable.add((extension: import("loaders/glTF/index").IGLTFLoaderExtension) => {
                                                                              ~~~~~~~~~~~~~~~~~~~~

src/components/renderingZone.tsx:379:51 - error TS7006: Parameter 'results' implicitly has an 'any' type.

379                 loader.onValidatedObservable.add((results) => {
                                                      ~~~~~~~

src/components/reflectorZone.tsx:70:27 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

70                     scene.debugLayer.show();
                             ~~~~~~~~~~

src/components/footer.tsx:9:45 - error TS2307: Cannot find module 'loaders/glTF/2.0/Extensions/KHR_materials_variants' or its corresponding type declarations.

9 import type { KHR_materials_variants } from "loaders/glTF/2.0/Extensions/KHR_materials_variants";
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/footer.tsx:37:53 - error TS2339: Property 'debugLayer' does not exist on type 'Scene'.

37             if (this.props.globalState.currentScene.debugLayer.isVisible()) {
                                                       ~~~~~~~~~~


Found 13 errors.

npm ERR! Lifecycle script `compile` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @tools/sandbox@1.0.0 
npm ERR!   at location: [censored]/dev/bjs/packages/tools/sandbox 
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @tools/sandbox@1.0.0 
npm ERR!   at location: [censored]/dev/bjs/packages/tools/sandbox 
[sandbox]$
2

No other typescript versions installed on the machine; the expected one is in use, the one specified in Babylin.js/package.json:

# [bjs]$ npm i
# succeeded...
[bjs]$ npx tsc --version
Version 5.1.6
3

since this is a monorepo and the package depends on others, they need to be built as well.
What you can do is run npx nx run @tools/sandbox:build it will take care of all dependencies.
You can also run npm run build:dev which will resolve this specific issue, but using nx will be safer.

3 Likes
4

Thank you @RaananW , that worked, appreciate the instant response :pray: let me know if you want me to add some of this information into one of the README.md files or somewhere for future folks like myself to discover.

5

it’s already there :slight_smile:

The usage of the monorepo is documented in the doc page and in the buildSystem.md file, but i can understand it can be a bit overwhelming.

6

oh, that is very helpful, thank you. I wasn’t smart/lucky enough to discover that documentation. while I have your attention, just want to confirm: the recommended extensions in .vscode/extensions.json and things that buildSystem.md says about the vscode workflows is kept reasonably up-to-date and is expected to also work, right?

7

of course. i think the entire team is using exclusively vscode to develop babylon, so we make sure to keep it working well. If something doesn’t work well, let us know!

1 Like