Context: The Unreal game engine (version 4.26) has an embedded browser based on the Chromium Embedded Framework (CEF). My team is developing an in-game UI as a React app that is intended to render inside this embedded browser. We are using the most basic out-of-the box React dev setup (what you get from create-react-app).
We ran into a bizarre issue where our React app wasn't rendering in the Unreal embedded browser. A fresh React app did, however.
Naturally, we concluded something was wrong with our code.
Normally to debug something like this, we'd want to see the JavaScript console to see if there are errors preventing the page from loading. But after a few days of research on Unreal's not-very-well-documented CEF browser solution, we still can't figure out how to get access to the JavaScript console (or any debugging tools) for Unreal's CEF widget.
As you might expect, this meant that we had to debug the situation with a painstaking process of commenting out entire sections of our React app (essentially binary searching through our codebase). We discovered that our use of Javascript's object spread operator was the culprit.
After removing all uses of the spread operator to construct components (<SomeComponent {...props} />) and all uses of the spread operator to construct new objects ({...stuff, key: value}), the UI now loads in Unreal.
Yay! I suppose that's good news. The bad news is: I happen to like the object spread operator... And removing it from components like <SomeComponent {...props} /> means that we have to abandon JSX and do something less idiomatic, like React.createElement(SomeComponent, props). I'd prefer to avoid this.
Note: I was surprised to find that the spread operator was the culprit because I thought things like this get compiled away before the browser sees them. In fact, using npm build, we were able to produce a production version of our React app that renders just fine in Unreal! (Presumably because the object spread operators get compiled away.)
So the main issue is that if we use spread operators, we can't get the React dev server (localhost:3000) to load in Unreal's browser. That means we can't get the nice hot-swapping features of the React development environment. But on the other hand, if we do use spread operators, we can only test our code by making a production build, which takes much longer.
Needless to say, we're in an uncomfortable position. So here are 2 concrete questions, either one of which would help:
Does anyone know how to get at Unreal's CEF JavaScript logs and/or connect to the embedded browser with some kind of debugging interface? This would probably shed light on things.
Does anyone know how React's under-the-hood Babel dev pipeline treats spread operators? Does it just avoid compiling them out during development and trusts that modern browsers will handle them? If so, can I somehow eject from React's default configuration and twiddle some magical setting that will make Babel compile the spread operators in development?
Please! Would some kind soul out there help us get our spread operators back! :)
