Temporary fix for dynamic import of locale files

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

@@ -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
+    localeLoader: (l: string) => import('@formatjs/intl-pluralrules/locale-data/' + l),
-    // the string fixes the warning.
-    localeLoader: (l: string) => import(`${localeDataFor('pluralrules', 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),
   }),
 }