React and Cloudflare, “bundle.js:38 Uncaught Invariant Violation: Unable to find element with ID 18”

Running a server-side rendered application with CloudFlare in front, I have seen this error:

bundle.js:38 Uncaught Invariant Violation: Unable to find element with ID 18.

Noticeably, since I have several domains on the server, I can the app from non-Cloudflare domains and the app works.

This is a somewhat confusing problem, because Cloudflare has several options that are relatively cryptic (caching is affected by the structure of the URL). They have a feature they call “Rocket Loader” which does not seem to be the culprit (although in future this may change).

I believe you can fix this issue by doing two things:

  • Disable HTML minification
  • Reset the cache for the URL(s) affected

React is currently incredibly sensitive to having it’s pages messed with, and this does not play well with Cloudflare always.