jpdevries / matboard

A Series of Conceptual Proof demonstrated with several different toolkits
13 stars 3 forks source link

Manage Users: White Screen of Death in IE 8 #5

Closed jpdevries closed 8 years ago

jpdevries commented 8 years ago

this is super annoying but react will bork the page, turn it into a blank white screen in IE8 so we have to not even try to load it :(

This seems like a react bug to me. I know they don't support IE8 but I would expect it to not destroy the document just by being included either

NOTE: I am using the dev builds in this project, but I tested with the .min production builds and had the same issue

jpdevries commented 8 years ago

Feels so dirty, but worked around this by detecting whether or not we are in IE8 or older (using feature detection) and then not even trying to load the scripts if it is an old browser. Again, I feel like we shouldn't have to be doing this.

<script>
    var doEnhancments = document.addEventListener ? true : false; // this is super annoying but react-redux will bork the page, turn it into a blank white screen in IE8 so we have to not even try to load it :(
  </script>

  <!-- NOTE: change these to load the .min in production. They are not only smaller filesize but have wildly different performance -->
    <script>if(doEnhancments) document.write('<script defer src="//cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"><\/script>');</script>
  <script defer>if(doEnhancments) try { Redux } catch (e) { document.write('<script src="assets/js/vendor/redux.js"><\/script>') }</script>

    <script>if(doEnhancments) document.write('<script defer src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"><\/script>');</script>
  <script defer>if(doEnhancments) try { React } catch (e) { document.write('<script src="assets/js/vendor/react.js"><\/script>') }</script>

    <script>if(doEnhancments) document.write('<script defer src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"><\/script>');</script>
    <script defer>if(doEnhancments) try { ReactDOM } catch (e) { document.write('<script src="assets/js/vendor/react-dom.js"><\/script>') }</script>

    <script>if(doEnhancments) document.write('<script defer src="//cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"><\/script>');</script>
    <script defer>if(doEnhancments)try { ReactRedux } catch (e) {  document.write('<script src="assets/js/vendor/react-redux.js"><\/script>') }</script>

    <script>if(doEnhancments) document.write('<script defer src="assets/js/app.js?nc=7"><\/script>');</script>