Gateway Webpage Example page not loading

Hello! I'm just getting into module development and starting by working with the Gateway Webpage example module. I'm on a fresh installation of 8.0.15 (in trial mode).

I've gotten the module packaged, signed, and installed on the Gateway, and the HomeConnect link shows up on the Status navigation as expected. But when I click on it, the content portion on the right side of the page remains blank and in the console I see this error:

Failed to load /main/res/hce/js/homeconnectstatus.js because of TypeError: _react2.default.PropTypes is undefined

I've followed the steps in the readme, so I've got Node running, I installed all of its dependencies, and I ran Webpack to build the final JS. Then I run mvn clean, package it, and install it to the Gateway, and it says it installed successfully and is running. The only problem is that page remaining blank. Definitely seems like I've missed a dependency somewhere but I'm not sure where. Any guidance would be much appreciated! Thanks

Hello!

Have you tried the example with a previous version of Ignition, as far as I can remember, this example is made for Ignition 8.0.14. Also, did you check if something appears in the logs concerning the page?

wow hi i’m back

Okay, so! I did in fact try again building that version of the module to 8.0.14, and it did work, thank you! So I know my process is good, at least.

That being said, these days I’m trying to build to 8.1.x and am once again having this same problem with this same example module (freshly downloaded from GitHub) – it installs, packages, and signs correctly but the browser continues to tell me that the React properties are undefined (even though I can see that React was bundled into the JS correctly). I’ve learned a bit more about how the Java stuff works, particularly with regard to the Ignition Maven plugin, but I haven’t nailed down what exactly will let me build this in such a way that the JavaScript gets bundled in correctly.

The problem was fixed last time by just building to the correct version (since I guess that was the most recent version that the examples supported). And maybe that’s the problem this time as well, so perhaps I can genericize this question a bit by asking: What is the recommended way to determine what the latest Ignition version supported by the SDK is, and what version of the Maven plugin I need to use to build to that? I notice that the example modules are currently built toward 8.1.0-SNAPSHOT, but I couldn’t get it to build correctly to 8.1.0. And also it seemed like the Nexus repo showed support for all the way up to 8.1.2, if I understand that whole piece correctly.

Thanks!

double wow hi i fixed it

So it turns out that the problem wasn’t with the build process or anything, but rather that npm was configured to install the React library at the highest available 0.14.x version, with 0.14.7 set as a minimum. Turns out that in the latest 0.14.x, two React objects used by this code were deprecated and removed: React.PropTypes, and React.createClass.

The solution was to:

  • download their replacement packages (npm i prop-types create-react-class)
  • import create-react-class into index.js and replace React.createClass with that
  • import prop-types into ConnectStatus.jsx then replace the two React.default.PropTypes references with that

Once I did that, re-webpack’d it, then rebuilt it all, it picked up and started working. :slight_smile:

So yeah, just an issue with the web dependencies themselves, not a problem with how it was packaging!

3 Likes