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.
Man you saved my day!
Struggled with this issue for 2 days.
Thanks a lot!
Glad it helped!
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.
Hi
if your production goes through CloudFlare, make sure to disable Auto Minifying in CloudFlare (Speed tab in their dashboard)
Hope it works out
Another example of this, along with some extensive documentation on when exactly it causes issues: https://stackoverflow.com/q/44356843/249801