React (with typescript) + Babylon's

Questions
1

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

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

./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'
2

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

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

1 Like
3

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.

1 Like
4

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”
]
}
}

5

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 and I can help either of those ways. Cheers.

6

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!

7

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

1 Like
8

I created a github repo : GitHub - livehop/babylonjs-typescript: testing babylonjs with 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

1 Like
9

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:

yarn install
yarn add react-reconciler
yarn start

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

<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:

#sample-canvas {
  width: 50%;
}

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

10

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

2 Likes
11

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

12

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. :slight_smile:

13

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

thanks