# Babylonjs react typescript

**URL:** <https://forum.babylonjs.com/t/babylonjs-react-typescript/9148>\
**Category:** Questions\
**Tags:** react\
**Created:** [March 12, 2020, 1:00pm UTC](https://forum.babylonjs.com/t/babylonjs-react-typescript/9148 "2020-03-12T13:00:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhiru](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dhiru/32/5213_2.png) [@dhiru](https://forum.babylonjs.com/u/dhiru)\
**Post date:** [March 12, 2020, 1:00pm UTC](https://forum.babylonjs.com/t/babylonjs-react-typescript/9148/1 "2020-03-12T13:00:06Z")

</div>

## Hi, I am trying to get babylon js working with react – typescript CRA and I am not getting the following error. Could any please advise what I might be doing wrong.

TypeScript error in /Users/dhiru/Source/Repos/Try1/client-app/src/App.tsx(10,41):  
Argument of type ‘typeof Engine’ is not assignable to parameter of type ‘ComponentClass\<{ babylonJSContext: WithBabylonJSContext; }, any\> | FunctionComponent\<{ babylonJSContext: WithBabylonJSContext; }\>’.  
Type ‘typeof Engine’ is not assignable to type ‘ComponentClass\<{ babylonJSContext: WithBabylonJSContext; }, any\>’.  
Construct signature return types ‘Engine’ and ‘Component\<{ babylonJSContext: WithBabylonJSContext; }, any, any\>’ are incompatible.  
The types of ‘props’ are incompatible between these types.  
Type ‘Readonly & Readonly\<{ children?: ReactNode; }\>’ is not assignable to type ‘Readonly\<{ babylonJSContext: WithBabylonJSContext; }\> & Readonly\<{ children?: ReactNode; }\>’.  
Type ‘Readonly & Readonly\<{ children?: ReactNode; }\>’ is not assignable to type ‘Readonly\<{ babylonJSContext: WithBabylonJSContext; }\>’.  
Types of property ‘babylonJSContext’ are incompatible.  
Type ‘WithBabylonJSContext | undefined’ is not assignable to type ‘WithBabylonJSContext’.  
Type ‘undefined’ is not assignable to type ‘WithBabylonJSContext’. TS2345

```
 8 | window.CANNON = CANNON;
 9 | 

```

> 10 | const EngineWithContext = withBabylonJS(Engine);  
> | ^  
> 11 | const gravityVector = new Vector3(0, -9.81, 0);  
> 12 | let sphere: Nullable = null;  
> 13 |

---

<div class="post-metadata">

**Author:** ![GabrielMarcondes](https://avatars.discourse-cdn.com/v4/letter/g/a8b319/32.png) [@GabrielMarcondes](https://forum.babylonjs.com/u/GabrielMarcondes)\
**Post date:** [March 12, 2020, 2:06pm UTC](https://forum.babylonjs.com/t/babylonjs-react-typescript/9148/2 "2020-03-12T14:06:51Z")

</div>

With the information you provided all I can conclude is that you need to pass a engine instance to the method withBabylonJS… You are currently passing the type.

it’s like using the Vector3 to get the gravityVector. The first is the type, the second a instance of the type.

Anyway, here is some code to help you.

```
        const canvas = document.getElementById('renderCanvas');
        (canvas! as HTMLCanvasElement).width = document.body.clientWidth; //document.width is obsolete
        (canvas! as HTMLCanvasElement).height = document.body.clientHeight;

        var engine = new BABYLON.Engine(canvas as HTMLCanvasElement, true, { preserveDrawingBuffer: true, stencil: true });

        var scene = new BABYLON.Scene(engine);
	    BABYLON.SceneLoader.Append("model/modelito/", "niceModel.gltf", scene, function (scene) {
             scene.createDefaultCameraOrLight(true, true, true);
		});       
        // run the render loop
        engine.runRenderLoop(function () {
            scene.render();
        });

        // the canvas/window resize event handler
        window.addEventListener('resize', function () {
            engine.resize();
        });
```