mattermost-community/focalboard

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

Open

#4122 aperta il 2 nov 2022

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (2542 fork)user submission
BugHelp WantedSev/2Up for grabs

Metriche repository

Star
 (26.187 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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.

Guida contributor