ForgeRock SDKs

Example: 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, see the forgerock-javascript-sdk repository.

Copyright © 2010-2023 ForgeRock, all rights reserved.