mattermost-community/focalboard

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

Ouverte

#4 122 ouverte le 2 nov. 2022

 (1 commentaire) (0 réaction) (0 personne assignée)TypeScript (2 542 forks)user submission
BugHelp WantedSev/2Up for grabs

Métriques du dépôt

Stars
 (26 187 étoiles)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

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.

Guide contributeur