Intl.DateTimeFormat#formatToParts() is not defined in older browsers — please manually polyfill it, example below

In older browsers (I’ve tried IE 9.0, 10, and 11 as well as Firefox 52 and 56), attempting to load the cart produces:

TypeError: a.formatToParts is not a function

Thoughts on a potential polyfill?

[TracerBuilt]

Thank you so much. This is extremely helpful.

[andria-dev]

Here is a link to my project that utilizes an optional polyfill loading pattern:

https://github.com/ChrisBrownie55/notably/blob/dabe00a22c8db1d18cc7f49fd7ef866138b4ecdc/src/index.tsx#L50-L59

The idea is that you can create some asynchronous functions that see if a polyfill is needed for a feature and then will load each polyfill and assign them to their respective names on the window. Once you have these, you can run them all and use Promise.all() to wait for all of them.

Once all of the asynchronous functions have ended, you can then import your App.js file dynamically and render it. The reason why we wait to import App.js is that if we try to use one of those features — used in the module’s global scope, not in a component/function — that need to be polyfilled within our app before it is polyfilled, then our app will crash.

async function loadXyz() {
	if (!window.xyz) {
		window.xyz = (await import('xyz-polyfill')).default
	}
}

async function loadAbc() { /* ... */ }

Promise.all([loadXyz(), loadAbc()])
	.then(() => import('./App.js'))
	.then(({ default: App }) => {
		// render
		ReactDOM.render(<App />, document.getElementById('root'));
	})