Hello, I’m currently facing compilation issues with Babylon4.1.0 in the context of an angular9 app. It seems like the inspector cannot import the internally used "react" module. The issue can be reproduced by
- Creating a bootstrap angular9 app with the CLI
- Adding @babylon/* dependencies to
package.json - Adding
import '@babylonjs/inspector';toapp.component.ts
I played with several module and target settings in the tsconfig.json but without luck. Frankly I’m also kind of clueless here as i’d assume that npm should have downloaded the needed dependencies (like react). Any ideas what could cause the issues?
Here are the relevant files, but as mentioned, this is basically just a newly bootstrapped, barebones angular9 app. for reproduction of the issue. Settings are pretty much all factory defaults.
Error log
$ npm run start
> angular9-babylon41@0.0.0 start D:\repos\angular9-babylon41
> ng serve
chunk {main} main.js, main.js.map (main) 1.99 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 673 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-05-31T11:09:34.586Z - Hash: e370845231b8941feaea - Time: 13568ms
ERROR in node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:77:28 - error TS2307: Cannot find module 'react'.
77 import * as React from "react";
~~~~~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:94:19 - error TS2503: Cannot find namespace 'JSX'.
94 render(): JSX.Element | null;
~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:98:28 - error TS2307: Cannot find module 'react'.
98 import * as React from "react";
~~~~~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:108:59 - error TS2503: Cannot find namespace 'JSX'.
108 renderLabel(child: PaneComponent, index: number): JSX.Element;
~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:109:19 - error TS2503: Cannot find namespace 'JSX'.
109 render(): JSX.Element;
~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:113:28 - error TS2307: Cannot find module 'react'.
113 import * as React from "react";
~~~~~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:125:26 - error TS2503: Cannot find namespace 'JSX'.
125 renderContent(): JSX.Element | null;
~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:126:19 - error TS2503: Cannot find namespace 'JSX'.
126 render(): JSX.Element;
~~~
node_modules/@babylonjs/inspector/babylon.inspector.module.d.ts:130:28 - error TS2307: Cannot find module 'react'.
130 import * as React from "react";
~~~~~~~
...
package.json:
{
"name": "angular9-babylon41",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.9",
"@angular/common": "~9.1.9",
"@angular/compiler": "~9.1.9",
"@angular/core": "~9.1.9",
"@angular/forms": "~9.1.9",
"@angular/platform-browser": "~9.1.9",
"@angular/platform-browser-dynamic": "~9.1.9",
"@angular/router": "~9.1.9",
"@babylonjs/core": "^4.1.0",
"@babylonjs/gui": "^4.1.0",
"@babylonjs/inspector": "^4.1.0",
"@babylonjs/loaders": "^4.1.0",
"@babylonjs/materials": "^4.1.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "~9.1.7",
"@angular/compiler-cli": "~9.1.9",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular9-babylon41": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/angular9-babylon41",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular9-babylon41:build"
},
"configurations": {
"production": {
"browserTarget": "angular9-babylon41:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular9-babylon41:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular9-babylon41:serve"
},
"configurations": {
"production": {
"devServerTarget": "angular9-babylon41:serve:production"
}
}
}
}
}},
"defaultProject": "angular9-babylon41"
}
app.component.ts:
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import '@babylonjs/inspector'; // causes compilation error
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'angular9-babylon41';
ngOnInit() {
console.log(`Test`);
}
}
