Running a JavaScript script before react loads to not render the react app if the browser is Internet Explorer

I want to run a javascript script that detects the user browser and if the browser is IE (not supported by my app, doesn’t plan to – but there are a couple of users who ran into this issue), I want to instead of rendering the app just displaying a message saying browser is not supported etc.

Script is pretty straightforward:

    function isBrowserSupported() {
      var userAgent = window.navigator.userAgent
      var isIE10orLower = userAgent.indexOf("MSIE ")
      var isIE11 = userAgent.indexOf("Trident/")
    
      return !(isIE10orLower > 0 || isIE11 > 0)
    }
    
    if (!isBrowserSupported()) {
      var warningTextElement = document.createElement("span")
      warningTextElement.innerHTML = "<h1>This browser is not supported. Please change it.</h1>"
      document.querySelector("#react-root").removeNode()
      document.querySelector("body").appendChild(warningTextElement)
    }

I am importing the script on the index.html file like that:

    <script type="text/javascript" src="detectUnsupportedBrowsers.js"></script>

With the script I am removing the react-root node which feels a bit hacky, it works but I want to know if there is a better way of doing this (like someplace I can execute a script before react renders?).

Thank you.

>Solution :

What you have tried is fine. You can conditionally render your app or warning text to the root div in the index.js file instead.

I would try it like below.

import ReactDOM from "react-dom";
import App from "./App";

function isBrowserSupported() {
  var userAgent = window.navigator.userAgent;
  var isIE10orLower = userAgent.indexOf("MSIE ");
  var isIE11 = userAgent.indexOf("Trident/");

  return !(isIE10orLower > 0 || isIE11 > 0);
}

const rootElement = document.getElementById("react-root");

ReactDOM.render(
  <>
    {isBrowserSupported() ? (
      <App />
    ) : (
      <h1>This browser is not supported. Please change it.</h1>
    )}
  </>,
  rootElement
);

Code sandbox => https://codesandbox.io/s/wispy-waterfall-ibzmg?file=/src/index.js