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.

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

  1. Hi, i am facing same issue. My code has External CSS which adds pseudo class (:before :after) which do not have react id, and i get that error on those node. How can i sole it? This only happens on my Production environment. NOT on dev OR pre-production machines.

    1. Hi

      if your production goes through CloudFlare, make sure to disable Auto Minifying in CloudFlare (Speed tab in their dashboard)

      Hope it works out

Leave a Reply

Your email address will not be published.