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.
More information
-
Polyfills needed for IE 11?· Issue #113 · auth0/auth0-spa-js · GitHub
-
Add IE11 polyfills by luisrudge · Pull Request #154 · auth0/auth0-spa-js · GitHub
-
javascript - Object doesn’t support property or method ‘remove’ - Stack Overflow
-
Allowing multiple domains to render your app in an iframe, using X-FRAME-OPTIONS