Bug: Invalid instantiation of Intl.Locale from formatjs dependency in Firefox

[LINKIWI]

Steps to reproduce the behavior

1. Go to the root path of the web server, i.e. localhost:8000
2. See a blank page and an error.

Expected behavior

I see the welcome screen.

Edition and Platform

• Edition: Personal Server
• Version: 7.4.3
• Browser and OS: Firefox 68, Ubuntu 20.04

Symptom

Loading any board causes a runtime exception as follows:

TypeError: Intl.Locale is not a constructor

Root cause

This is a vanilla web compatibility bug with older versions of Firefox due to missing API implementations. (I am operating Focalboard under a proprietary, restricted environment where a browser upgrade is not feasible.)

Proposal

There exists a polyfill for this API: https://formatjs.io/docs/polyfills/intl-locale/

I fixed this issue locally with the following patch:

diff --git a/webapp/package.json b/webapp/package.json
index 25843393..832b49d7 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -27,6 +27,7 @@
                "@draft-js-plugins/editor": "^4.1.2",
                "@draft-js-plugins/emoji": "^4.6.0",
                "@draft-js-plugins/mention": "^5.1.2",
+               "@formatjs/intl-locale": "^3.0.7",
                "@fullcalendar/core": "^5.10.1",
                "@fullcalendar/daygrid": "^5.10.1",
                "@fullcalendar/interaction": "^5.10.1",
diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
index dd9a3168..e4a9ee32 100644
--- a/webapp/src/main.tsx
+++ b/webapp/src/main.tsx
@@ -1,5 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
+import '@formatjs/intl-locale/polyfill'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {Provider as ReduxProvider} from 'react-redux'

I'd like to propose something like this: it offers improved webcompat with minimal additional code, and with minor bundle size cost.

[jespino]

@sbishel assigned it to you to reassign it