# React (with typescript) + Babylon's

**URL:** <https://forum.babylonjs.com/t/react-with-typescript-babylons/7739>\
**Category:** Questions\
**Created:** [December 23, 2019, 11:07pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739 "2019-12-23T23:07:10Z")\
**Posts on this page:** 13\
**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:** [December 23, 2019, 11:07pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/1 "2019-12-23T23:07:10Z")

</div>

Hi, I am trying to use Babylonjsn with CRA (react) with typescript – I also followed all the steps included in the GitHub project :-

> **[brianzinn/create-react-app-typescript-babylonjs](https://github.com/brianzinn/create-react-app-typescript-babylonjs)**
>
> BabylonJS + TypeScript + Create React App Starter Kit - brianzinn/create-react-app-typescript-babylonjs

* * *

I am getting the following error; I also tried to install the react-reconciler but then I run into other issues. Could you please point me to what I might be missing.

Failed to compile

```auto
./node_modules/react-babylonjs/dist/react-babylonjs.es5.jsModule not found: Can't resolve 'react-reconciler' in '/Users/dhiru/Source/WebRepos/liveviewer/node_modules/react-babylonjs/dist'

```

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 2, 2020, 12:59pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/2 "2020-01-02T12:59:21Z")

</div>

I guess you could try to create the issue on @brianzinn repo 🙂

@brianzinn might also be in vacation and I bet he ll be able to help as soon as he ll be back.

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [January 2, 2020, 6:59pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/3 "2020-01-02T18:59:29Z")

</div>

Sorry for late reply. The ‘react-reconciler’ is a peer dependency and should be provided by CRA. Can you share your repo or your package.json? I created that typescript example from CRA v3 and then added BabylonJS.

---

<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:** [January 4, 2020, 7:55pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/4 "2020-01-04T19:55:33Z")

</div>

No problem; I tried a couple of stuff … I think its got to do with cannon.js typings …(not sure); Please find the attached package.json; I tried a couple of npm install’s since then.  
Please advise.

## Many thanks!

{  
“name”: “liveviewer”,  
“version”: “0.1.0”,  
“private”: true,  
“dependencies”: {  
“@babylonjs/core”: “^4.0.3”,  
“@babylonjs/gui”: “^4.0.3”,  
“@babylonjs/loaders”: “^4.0.3”,  
“@testing-library/jest-dom”: “^4.2.4”,  
“@testing-library/react”: “^9.3.2”,  
“@testing-library/user-event”: “^7.1.2”,  
“@types/cannon”: “^0.1.4”,  
“@types/jest”: “^24.0.0”,  
“@types/node”: “^12.0.0”,  
“@types/react”: “^16.9.0”,  
“@types/react-dom”: “^16.9.0”,  
“cannon”: “^0.6.2”,  
“react”: “^16.12.0”,  
“react-babylonjs”: “^2.0.2”,  
“react-dom”: “^16.12.0”,  
“react-scripts”: “3.3.0”,  
“typescript”: “~3.7.2”  
},  
“scripts”: {  
“start”: “react-scripts start”,  
“build”: “react-scripts build”,  
“test”: “react-scripts test”,  
“eject”: “react-scripts eject”  
},  
“eslintConfig”: {  
“extends”: “react-app”  
},  
“browserslist”: {  
“production”: [  
“\>0.2%”,  
“not dead”,  
“not op\_mini all”  
],  
“development”: [  
“last 1 chrome version”,  
“last 1 firefox version”,  
“last 1 safari version”  
]  
}  
}

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [January 6, 2020, 8:13pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/5 "2020-01-06T20:13:01Z")

</div>

hi @dhiru that’s the same as the working example Typescript that I have! I’m using the same cannon and typings versions as you have. if you can share your repository then I can look, but otherwise do you want to create an issue on the main repository [GitHub - brianzinn/react-babylonjs: React Components for BabylonJS](https://github.com/brianzinn/react-babylonjs) and I can help either of those ways. Cheers.

---

<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:** [January 7, 2020, 2:06pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/6 "2020-01-07T14:06:48Z")

</div>

Sure, let me share the repository – also if you want I can also re-try from scratch; since I tried multiple times in December and kept getting the same error.

Let me checkin this project on GitHub and let you know in sometime.

Many thanks!

---

<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:** [January 8, 2020, 4:28pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/7 "2020-01-08T16:28:05Z")

</div>

Apologies, will do this today and send you the github repo location.

---

<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:** [January 9, 2020, 12:38am UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/8 "2020-01-09T00:38:37Z")

</div>

I created a github repo : [GitHub - livehop/babylonjs-typescript: testing babylonjs with typescript](https://github.com/livehop/babylonjs-typescript)

all I did was :-

1. npx create-react-app babylonjs-app --typescript
2. yarn add react-babylonjs
3. yarn add @babylonjs/core
4. yarn add @babylonjs/gui
5. yarn add @babylonjs/loaders
6. yarn add cannon@0.6.2
7. npm install @types/cannon
8. copied your App.tsx

Please let me know what step I might be missing

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [January 10, 2020, 4:50am UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/9 "2020-01-10T04:50:12Z")

</div>

I misstated that react-reconciler would be auto installed. I would need to dig into CRA, but at any rate got your repo working with this:

```auto
yarn install
yarn add react-reconciler
yarn start

```

To load the font, I added to `/public/index.html`:

```auto
<style type="text/css">
      @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
</style>

```

Then I just needed a css tweak to get the button click working in `/src/app.css`:

```auto
#sample-canvas {
  width: 50%;
}

```

I’ll update the documentation and thanks for reporting and making the effort to share your repo.

---

<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:28am UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/10 "2020-03-12T01:28:14Z")

</div>

Many thanks for your help on this; I am truly liking your library!!!

---

<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, 2:27am UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/11 "2020-03-12T02:27:01Z")

</div>

## I tried to re-start a fresh project just to make sure I have not done any patchy installations; and now I get a different error (not sure what I am doing wrong); I did the same steps twice now :- Please advise …

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);

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [March 12, 2020, 6:55pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/12 "2020-03-12T18:55:47Z")

</div>

It looks like you are trying to pass an @babylonjs/core Engine to the HOC (High Order Component) method. Check your imports and make sure your aliases are correct would be my first guess. If you are stuck and can share a repo let me know. Also, if you have updated to BabylonJS 4.1 update react-babylonjs as well - there is a breaking typing with ThinEngine. 🙂

---

<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, 9:36pm UTC](https://forum.babylonjs.com/t/react-with-typescript-babylons/7739/13 "2020-03-12T21:36:59Z")

</div>

I have send you an invite; please let me know if you are able to get it.

thanks