We are in the process of upgrading our React v17 app to v18. Currently we use react-app-polyfill as well as bowser to check if users are using a supported browser, and show a simple alert if they aren't. The app doesn't work properly on IE11 but the alert at least appears.

Now that we don't have any specific requirements to support IE11 it would be nice to remove the polyfill dependency, but obviously nothing within the React app will render without it, alert included. Aside from the hacky solution of hardcoding text into the index.html root div, does anyone have a simple way of notifying users of a) IE11 and / or b) any unsuitable browser that their browser is not supported?

CodePudding user response：

You may use a <script> tag with nomodule attribute inside your index.html like this:

<script nomodule>
  alert('Sorry, you need to upgrade your web browser :(');
  // or
  window.location.href = 'a static page where you explain what to do';
</script>

This script will only be executed on web browsers that do not support ES Modules, which are Chrome <61, Firefox <60, Safari <11, Edge <16 and all versions of Internet Explorer (to mention only the most common ones).

CodePudding user response：

I'd lean toward Valentin's nomodule approach.

But if you have a reason for not requiring module support, then I'd lean toward:

1. Doing a feature-check on some JavaScript language feature that you know IE doesn't have but you know your target browsers will have (like class, which is supported by all modern or even semi-modern browsers and markedly predated module support in browsers; but the specific choice is up to you).

2. If the feature-check fails, add your alert using something other than React.

For example:

function isObsolete() {
    try {
        (0, eval)("class Example { }");
        return false;
    } catch (e) {
        return true;
    }
}
// ...
if (isObsolete()) {
    // ...add/perform warning...
}