title: isomorphic/universally-rendered React 15 app breaks with Cloudflare HTTP Proxy ("orange cloud")
body: <p>I have an isomorphic/universal React app, meaning it is rendered on the server by the same JS that powers the client-side, Single Page App user experience.</p>
  
  <p>I configure this app's DNS using Cloudflare, and use their "orange cloud" feature to accelerate and protect my site's traffic, as explained in the following graphic and <a href="https://support.cloudflare.com/hc/en-us/articles/115005138088-Load-Balancing-TTLs-and-Orange-vs-Grey-Cloud" rel="nofollow noreferrer">in their support article</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/rcOJU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rcOJU.png" alt="Orange Cloud: Records that display an orange cloud icon are accelerated and protected by Cloudflare. Grey Cloud: Records that display a grey cloud icon will bypass Cloudflare, using only Cloudflare DNS"></a></p>
  
  <p>From the linked-to article: "Cloudflare can operate in two modes - DNS only (unproxied; 'grey cloud') and as a HTTP proxy ('orange cloud') with our security, CDN &amp; performance features."</p>
  
  <p>I have discovered that running my app with React 15 and Cloudflare's "orange cloud" HTTP Proxy feature results in an error:</p>
  
  <blockquote>
    <p>reactProdInvariant.js:31 Uncaught Error: Minified React error #32; visit <a href="http://facebook.github.io/react/docs/error-decoder.html?invariant=32&amp;args[]=2" rel="nofollow noreferrer">http://facebook.github.io/react/docs/error-decoder.html?invariant=32&amp;args[]=2</a> for the full message or use the non-minified dev environment for full errors and additional helpful warnings.</p>
  </blockquote>
  
  <p>The text of the linked-to bug:</p>
  
  <blockquote>
    <p>Unable to find element with ID 2.</p>
  </blockquote>
  
  <p>This ID probably refers to the <code>head</code> tag of my page:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"&gt;&lt;head data-reactid="2"&gt;...
  </code></pre>
  
  <p>I do NOT get this issue with React 14.</p>
  
  <p>I do NOT get this bug when using the raw, un-DNS-ed address of my app, nor do I get it when I switch to the "grey cloud" to use Cloudflare as only a DNS service.</p>
  
  <p>I do NOT get this issue when I disable server-side rendering.</p>
  
  <hr>
  
  <p>When I google the text of the linked-to "actual" error, I find <a href="https://github.com/facebook/react/issues/7093" rel="nofollow noreferrer">this Github thread</a> that confirms that this has something to do with server-side rendering.</p>
  
  <p>However, my situation differs slightly: that thread's author encounters the error with an "unable to find element" ID referring to a <code>style</code> tag, whereas in my case the unfound element ID refers to the <code>head</code> tag.</p>
  
  <hr>
  
  <p>When I google the text of the production "wrapped" error, I find <a href="https://github.com/facebook/react/issues/7181" rel="nofollow noreferrer">this Github thread</a> that confirms that this has something to do with Cloudflare's HTTP Proxy. <a href="https://github.com/facebook/react/issues/7181#issuecomment-301677313" rel="nofollow noreferrer">This comment</a> says: "If you're using CloudFlare, please disable auto-minification of HTML."</p>
  
  <p>So far, I can't figure out how to do that. It's hard for me to find good information on what exactly Cloudflare does with their HTTP Proxy, and how I can configure it.</p>
  
  <hr>
  
  <p>Questions:</p>
  
  <ul>
  <li>Why exactly does this bug happen?</li>
  <li>Where can I find information about what exactly the "orange cloud" does?</li>
  <li>What is the best way to fix this problem while maintaining the benefits of Cloudflare's HTTP Proxy?</li>
  </ul>