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.

Interested in JavaScript? I send out weekly, personalized emails with articles and conference talks. Click here to see an example and subscribe.

5 replies
  1. raghunandan gupta
    raghunandan gupta says:

    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.

    Reply
    • chen
      chen says:

      Hi

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

      Hope it works out

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *