Include polyfills and patches

You have choices for getting the polyfills and patches into your JavaScript runtime:

Import polyfills at the top level: Import them into your top-level app file, which adds all polyfills to all browser requests. This is easier to implement, at the expense of slower performance.
Include polyfills with Webpack: Include them in your Webpack config, and conditionally include them. This is more complex to implement, but is exhibits higher performance.

Import polyfills at the top-level

You can import all polyfills at the beginning of your top-level app file. This is the easiest approach. The result is slower performance for modern browsers that don’t need all the polyfills:

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'whatwg-fetch';
import 'fast-text-encoding';

if (!window.crypto && window.msCrypto) {
  window.crypto = window.msCrypto;
}
if (!Element.prototype.remove) {
  Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
  };
}

Include polyfills with Webpack

You can build the polyfills separately and conditionally include them in your runtime if the browser requires them. This is approach results in better performance for modern browsers that don’t require the additional code:

// webpack.config.js

module.exports = {
  entry: {
    'app': './index.tsx',
    'polyfills': [
      'core-js/stable',
      'regenerator-runtime/runtime',
      'whatwg-fetch',
      'fast-text-encoding'
    ]
  },
  // module property with your babel or typescript loaders
  // and any other plugins needed ...
  output: {
    filename: '[name].js'
  }
};

// top-level app file (aka entry point)

// Patch missing crypto library
if (!window.crypto && window.msCrypto) {
  window.crypto = window.msCrypto;
}
// Patch missing el.remove() method
if (!Element.prototype.remove) {
  Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
  };
}

function hasSupportedFeatures() {
  return window.Promise &&
    window.URL &&
    window.fetch &&
    window.TextEncoder &&
    Object.assign;
}

function loadApp() {
  ReactDom.render(<Login />, document.getElementById('sdk-target'));
}

function loadPolyfills(done: () => void) {
  const js = document.createElement('script');
  js.src = '/js/polyfills.js';
  js.onload = () => done();
  js.onerror = () => console.error('Failed to load polyfills');
  document.head.appendChild(js);
}

if (hasSupportedFeatures()) {
  loadApp();
} else {
  loadPolyfills(loadApp);
}

To review a working example of this runnable in IE 11, refer to the forgerock-javascript-sdk repository.