React and Inspector

Hi! I made a project using the boilerplate from this repo from the docs: https://github.com/blurymind/babylon-react-electron-app . My project is working as it should, but I can’t get the inspector to behave. I have this line in the code for my scene: scene.debugLayer.show(). The scene explorer will appear on the left the first time I load the page from the development server, but as soon as I click something it disappears and then on subsequent page loads it is missing entirely.

I learned from this post https://medium.com/@babylonjs/dev-log-creating-the-new-inspector-b15c50900205 that the inspector is also created using React. I wonder if this isn’t causing some kind of conflict? The inspector fails to work properly in the test app from blurymind’s repo as well. I looked over the docs and I see there are some options for the inspector, but I wasn’t using any before and don’t know what I would need to change to get it going.

I’m new to React so I am having trouble even finding where to begin. The inspector worked just fine in my plain typescript project. All I did was chop the scene creation bit and paste it over the scene in the boilerplate (modified imports and such). The scene works exactly the same. I just can’t figure this inspector bit out. I use it constantly. Hope someone out there knows of a fix.

pinging @sebavan who had the same issue

After reading some posts by @sebavan regarding this issue, I wanted to provide some more details.

I am not using es6 modules. I tried creating the inspector manually and showing it, but no success.

edit: No errors in the console or react compiler either, so I have no idea where to start.

Adding @brianzinn who built the babylon react project and will for sure have some more insights about this part.

Also adding @julien-moreau who built the inspector in Electron in case there were some gotchas.

That electron project is not using react-babylonjs NPM or ES6. It’s been on my todo list for a while to write an Electron starter kit, I’ll start it up now and see if I can get the inspector working. If you have a repository that can be shared then I can take a look there.

I’m not using the electron functionality from that project, it’s optional. Do you have the inspector working with your react projects?

Not recently. I have an old React project that did only (Babylonjs 2.5). I’ll give it a try against latest versions. Are you saying that you can’t get the inspector to work with or without electron?

I can’t get it to work without electron. I haven’t tried to build it with electron. I’m thinking about just abandoning my react dreams. I’m not familiar with it and the added complexity looks like it is going to occupy too much of my time.

I didn’t have any issues, but I am using an ES6 project. Here is the repo - I’m going to add electron next.

If you click the button it will show/hide the inspector.

If you have your own repo then I can take a look. React has a learning curve, but hopefully you don’t abandon your react dreams too early!!

1 Like

Thanks, I’ll take a look. I notice that it looks like your canvas is really small there. Any time I try to use that boilerplate code with the ES6 modules it does that. If I switch back, then the resizing works properly. Any ideas?

I had css {width: 50%}. If I use width 100% the canvas resizes properly when I show/hide the inspector.

1 Like

got it running in Electron with no issues:

I checked in what you see there.

1 Like

Well then I have no idea why my canvas shrinks with the ES6 modules. I’ll have to try again, maybe I had been messing with the css and the issue is unrelated. Thanks for looking into it. I’ll clone that repo and see if I can hack my project into it.

1 Like

@dudicious I added electron-builder and built a portable binary - it’s powered by React :slight_smile: I needed to add a few things to get that going, specifically to access node from the browser. It’s all in the latest commit.

One thing cool is with yarn start-electron that it will run the website with HMR and with dev tools open, so it’s a good DX. I only tested building windows portable binary, but can spin up my macbook or boot into linux if those don’t work. Good luck!

1 Like

I also had some issues with React, but found the solution from @brianzinn 's electron project. It’s not at all complicated, but what really threw me off was I was using a window.addEventListener to toggle the inspector view, which was being called twice because of the React development hooks lifecycle whackadoodle, and hiding the inspector. In any case, big thanks to @brianzinn for this great library and examples. Redux + babylon offers many flexible development possibilities, and react-babylon bridges that gap beautifully.

1 Like