Make react-icomoon work with Webpack 5

Summary:
`react-icomoon` has a quirky CommonJS export with a hack meant to make it work when imported from an ES Modules context. The idea was that would set `exports.__esModule` to enable the hack, and you would export a prop named `default` that would be the "default" import for the ESM.

This hack was supported in Webpack 4, but not in Webpack 5. There's a lot of [noise](webpack/webpack#10971) about [this](webpack/webpack#7973) on [GitHub](babel/babel#12363), but the Webpack team points to Node as no longer supported this hack either as justification for pulling it out.

The `react-icomoon` package uses this hack. I tried upgrading it, but the latest version still had the same problem. To get around it, I just update the code to access `.default` directly.

Note that this means `lib/components/SWMansionIcon.react.js` wouldn't work in a React Native context, despite `react-icomoon` claiming to support React Native. But we don't need it on React Native since we use `createIconSetFromIcoMoon` from `@expo/vector-icons` instead.

Depends on D6703

Test Plan:
1. I tested dev build in `web` via `yarn dev` in `web` + `keyserver` and then tested the website
2. I tested prod build by running `yarn prod` in `web` and then tested the website by running keyserver with `yarn prod-build && yarn-prod`

Reviewers: atul, tomek

Reviewed By: atul

Differential Revision: https://phab.comm.dev/D6704

lib/components/SWMansionIcon.react.js

@@ -4,6 +4,9 @@ import * as React from 'react';
 import IcomoonReact from 'react-icomoon';
 
 import iconSet from '../shared/swmansion-icon-config.json';
+
+const IcomoonIcon = IcomoonReact.default;
+
 /*
 
  To see all of the icons the application uses and what their names are:
@@ -309,7 +312,7 @@ const iconStyle = {
 };
 
 function SWMansionIcon(props: SWMansionIconProps): React.Node {
-  return <IcomoonReact {...props} style={iconStyle} iconSet={iconSet} />;
+  return <IcomoonIcon {...props} style={iconStyle} iconSet={iconSet} />;
 }
 
 export default SWMansionIcon;

lib/package.json

@@ -42,7 +42,7 @@
     "just-clone": "^3.2.1",
     "lodash": "^4.17.21",
     "react": "18.1.0",
-    "react-icomoon": "^2.4.1",
+    "react-icomoon": "^2.5.7",
     "react-redux": "^7.1.1",
     "reselect": "^4.0.0",
     "reselect-map": "^1.0.5",

web/CommIcon.react.js

@@ -5,6 +5,8 @@ import IcomoonReact from 'react-icomoon';
 
 import iconSet from 'lib/shared/comm-icon-config.json';
 
+const IcomoonIcon = IcomoonReact.default;
+
 export type CommIcons =
   | 'cloud-filled'
   | 'sidebar'
@@ -30,7 +32,7 @@ const iconStyle = {
 };
 
 function CommIcon(props: CommIconProps): React.Node {
-  return <IcomoonReact {...props} style={iconStyle} iconSet={iconSet} />;
+  return <IcomoonIcon {...props} style={iconStyle} iconSet={iconSet} />;
 }
 
 export default CommIcon;

web/package.json

@@ -67,7 +67,7 @@
     "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "18.1.0",
     "react-feather": "^2.0.3",
-    "react-icomoon": "^2.4.1",
+    "react-icomoon": "^2.5.7",
     "react-icons": "^4.4.0",
     "react-redux": "^7.1.1",
     "react-router": "^5.2.0",

yarn.lock

@@ -19395,10 +19395,10 @@ react-html-email@^3.0.0:
   dependencies:
     prop-types "^15.5.10"
 
-react-icomoon@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-icomoon/-/react-icomoon-2.4.1.tgz#cae0483f59a66d8e43e5f6e310f4693e60cb1e03"
-  integrity sha512-DEiilFNHoLpQq71t3jmNRyKf6BEUc9+yOE4wJolVrLCnmJF+cDViPgnL47i3GHHAak1Qf9Yj6xF5Ltwot2T6LA==
+react-icomoon@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-icomoon/-/react-icomoon-2.5.7.tgz#628494b5cf2531af3f2beca30763be5f989f3139"
+  integrity sha512-o6jsNviL7d2/fk83JXycvMSX76KSQ5GuC+q8xi+3anL4KY8EZH4D1BfXdqL8SF+ppOigrq4epUhfnWX8U/gM7g==
 
 react-icons@^4.3.1:
   version "4.3.1"