Babylon.js with ReactJS initialization problem

Hi everyone,

I’ve been struggling for two days to have a page with a babylonjs scene in a react environment. I am trying to implement this how to example but I get compile error.

I set up a repo here : GitHub - elRomano/siteV2020_v2: Website 2020_v2

There are just the two files in the tutorial and I added a <PageWithScene /> component in the App.

I tried many changes but I always have compliing errors. If at least I could have a correct init of the scene that would help keep going on.

Thanks a lot.

Adding @brianzinn who has worked on that quite a lot and could share his experience.

1 Like

Thank you, I managed tweaking the code so I can see the canvas. It seems to works now but I had to change some of the provided code. Maybe my config (typescript ?) made the problem ? Or is there some bugs in the original code ?

I updated the repo.

1 Like

hi @16ar - glad you got it working. I will bring that ‘how to example’ into 2020. I wrote it in 2017, so before the ES6 modules. It’s kind of out of date as well for other reasons - additionally, it should probably have both javascript and typescript examples separate (looks like you got caught on the typings) and maybe even links to codepen or something… It would be good for me to revamp that. Thanks for sharing your repo.

1 Like

Ok your answer makes feel better. I’m a beginner at everything : npm, react, TS, and babylonjs so to me any problem I stumble upon can come from anywhere ! :sweat_smile:

But I’m improving so that’s ok :slight_smile:

Thanks a lot !

I would also benefit from this update, as I’m in the process of replacing my HTML gui with ReactJS!

ok - thanks for reminder. i’ll get onto that today - For typical imperative coding there may not be advantages to using react-babylonjs NPM, for anything GUI or component-based I think the declarative GUI building should be investigated. Not saying you should use that NPM, but just to know it’s capabilities and decide for yourself. The updates to the article will be mostly without using that NPM and updated to ES6 and with/without typescript.

@brianzinn I had a very brief look at that NPM link; adopting that would disrupt my workflow too much, so all I’m looking to do is build a component that renders my scene. I’ve read your 2017 post and tried mirroring it, but with no success.

I’m building our application using TypeScript, ES6 tree shaking, WebPack bundling and chunk splitting. Everything looks syntactically correct in Visual Studio Code – and builds with no errors, but I’m getting a blank page when I run my app, along with component errors in my commons.bundle.js (where my react and babylon modules reside).

Something that lists best use practices for the tsconfig.json and webpack compiler would be a godsend!

You won’t get that out the updated article - I’m just using CRA - not ejected and not using custom webpack. You may get more mileage out of Raanan’s new es6 repo as a better starting point?

@brianzinn Sorry if it seemed like I was asking for the stars and the moon haha. I should clarify – my app has been working for awhile now, I’m just now venturing into the react realm and that’s where I’m running into trouble. I’m probably messing up in my implementation of the react component in my .tsx file. Hopefully I’ll be able to see where I’ve went wrong in your update.

Thanks for the link!

@3D_Wave_Design - I didn’t think you were asking for too much - I was just letting you know that the update likely wouldn’t help you much out of CRA, while the project from Raanan would maybe be more helpful. I’m just starting on a repo now… cheers.

1 Like

ok @3D_Wave_Design, so I made a small component seems to basically do everything. if you are getting a blank page, make sure you have an engine run loop calling scene render and have the canvas reference (and useEffect or onComponentDidMount to get the ref).

I put the component here and may write a hook instead to attach to any canvas:

You can just copy and paste that into your project. Then to use it, go like this:

I was going to initially make a project without any dependencies, so called it vanilla and then realized a simple hook is all many people will want, so to make it easy to install or copy. I had a couple of tequilas to celebate cinco de Mayo, so may be a few things off in there, but at least it is rendering a playground and was able to participate in the render loop with a rotating mesh. Should cover most use cases. I’ll try to get to the article by the weekend - wanted a working example first. Cheers.


You’re a good man, Charlie Brown. Works as expected, and I now have a better understanding updating React elements. Have another tequila!


Just in case you’re using the babylonjs-hook.tsx as a future boilerplate, I realized the useEffect function for handling window/engine resizing wasn’t working because it thought the scene state was still “null”, so I added [scene] as the second useEffect argument and it was updated.

1 Like

yeah, you are totally right - thanks. the [] only runs once and too early :slight_smile: