Angular9/Typescript3.8/Babylon4.1.0 - Typescript compilation error - Cannot find module ‘react’/Cannot find namespace ‘JSX’

Question

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'; to app.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`);
  }
}

timmwagener · Accepted Answer

The solution was provided by BabylonJS core devs. in the BabylonJS forum. Basically:

In the 4.1.0 version of BabylonJS the @types/react and @types/react-dom deps. somehow got lost in the framework requirements.
Adding them manually into the package.json devDependencies fixes this for clients.
BabylonJS will likely in some future version have this fixed and the deps. will be added again.

Angular9/Typescript3.8/Babylon4.1.0 - Typescript compilation error - Cannot find module ‘react’/Cannot find namespace ‘JSX’

Answers (2)

Related Questions