From a4c2ccc2666008f31dddf36b86b62e6fe99e633e Mon Sep 17 00:00:00 2001
From: Charley Kline <ckline@instructure.com>
Date: Wed, 14 Aug 2024 16:21:45 -0500
Subject: [PATCH] Temporary fix for dynamic import of locale files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes FOO-4657
flag=none

The rspack upgrade changes how pathnames are mapped
for dynamic imports, which broke the language polyfill
code. I wasn't able to get all the way to the bottom
of what's going on; there is probably a better fix for
this (or maybe not!), but this makes the import more
explicit in a way that rspack clearly understands.

Will probably need to revisit this issue to clean up
the code and research exactly what is going. In the
mean time, this will do.

Test plan:
* Be in Google Chrome
* Set your user's language to Íslenska
* Reload the page with the browser console open
* You should see successful "polyfilled is for locale is"
  and not any "Cannot find module" errors

Change-Id: I6c42d3f80da01576d939f5d3b39f042ca1ef594c
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/355131
Reviewed-by: Dustin Cowles <dustin.cowles@instructure.com>
QA-Review: Charley Kline <ckline@instructure.com>
Product-Review: Charley Kline <ckline@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
---
 ui/engine/capabilities/IntlPolyfills/index.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/engine/capabilities/IntlPolyfills/index.ts b/ui/engine/capabilities/IntlPolyfills/index.ts
index 97af66fa6f0..2b468ec891d 100644
--- a/ui/engine/capabilities/IntlPolyfills/index.ts
+++ b/ui/engine/capabilities/IntlPolyfills/index.ts
@@ -33,6 +33,10 @@ declare const ENV: {
 
 const FORMAT_JS_DIR = '/dist/@formatjs'
 
+// TODO:  FOO-4658  to research and generally clean this up the right way.
+// Short-circuiting this factored-out funcion for now until we get to the bottom
+// of the pathname mapping issue.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function localeDataFor(sys: string, locale: string): string {
   return `${FORMAT_JS_DIR}/intl-${sys}/locale-data/${locale}.js`
 }
@@ -143,9 +147,7 @@ const subsystems: {[subsys: string]: Capability} = {
     subsysName: 'PluralRules',
     should: spfPR,
     polyfill: () => import('@formatjs/intl-pluralrules/polyfill-force'),
-    // rspack doesn't know that localeDataFor returns a string, so it throws a warning. Interpolating
-    // the string fixes the warning.
-    localeLoader: (l: string) => import(`${localeDataFor('pluralrules', l)}`),
+    localeLoader: (l: string) => import('@formatjs/intl-pluralrules/locale-data/' + l),
   }),
 
   datetimeformat: polyfillerFactory({
@@ -155,21 +157,21 @@ const subsystems: {[subsys: string]: Capability} = {
       await import('@formatjs/intl-datetimeformat/polyfill-force')
       await import('@formatjs/intl-datetimeformat/add-all-tz')
     },
-    localeLoader: (l: string) => import(`${localeDataFor('datetimeformat', l)}`),
+    localeLoader: (l: string) => import('@formatjs/intl-datetimeformat/locale-data/' + l),
   }),
 
   numberformat: polyfillerFactory({
     subsysName: 'NumberFormat',
     should: spfNF,
     polyfill: () => import('@formatjs/intl-numberformat/polyfill-force'),
-    localeLoader: (l: string) => import(`${localeDataFor('numberformat', l)}`),
+    localeLoader: (l: string) => import('@formatjs/intl-numberformat/locale-data/' + l),
   }),
 
   relativetimeformat: polyfillerFactory({
     subsysName: 'RelativeTimeFormat',
     should: spfRTF,
     polyfill: () => import('@formatjs/intl-relativetimeformat/polyfill-force'),
-    localeLoader: (l: string) => import(`${localeDataFor('relativetimeformat', l)}`),
+    localeLoader: (l: string) => import('@formatjs/intl-relativetimeformat/locale-data/' + l),
   }),
 }