feat: babel-plugin-react-intl to babel-plugin-formatjs migration (#404 )

* feat: babel-plugin-react-intl to babel-plugin-formatjs migration * fix: upgraded frontend-build to fix security issue * fix: upgraded frontend-build to fix security issue * fix: upgraded frontend build again * refactor: upgraded to latest frontend-build and resolved vulnerabilities
chore(deps): update dependency react-router-dom to v6.17.0
2023-10-30 15:17:10 +05:00 · 2023-10-30 10:09:57 +00:00
4 changed files with 280 additions and 183 deletions
--- a/4
+++ b/4
@@ -6,7 +6,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs

 build:
 	rm -rf ./dist
@@ -17,7 +17,7 @@ build:
 	@rm -rf dist/__mocks__

 requirements:
-	npm install
+	npm ci

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
      "devDependencies": {
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
        "@edx/browserslist-config": "^1.1.1",
-        "@edx/frontend-build": "12.9.17",
+        "@edx/frontend-build": "13.0.3",
        "@edx/frontend-platform": "6.0.2",
        "@edx/reactifex": "^2.1.1",
        "@testing-library/dom": "9.3.3",
@@ -38,7 +38,7 @@
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-redux": "7.2.9",
-        "react-router-dom": "6.16.0",
+        "react-router-dom": "6.17.0",
        "react-test-renderer": "17.0.2",
        "redux": "4.2.1",
        "redux-saga": "1.2.3"
@@ -60,9 +60,9 @@
      }
    },
    "node_modules/@adobe/css-tools": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-      "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
      "dev": true
    },
    "node_modules/@ampproject/remapping": {
@@ -177,15 +177,6 @@
        "eslint": "^7.5.0 || ^8.0.0"
      }
    },
-    "node_modules/@babel/eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
    "node_modules/@babel/generator": {
      "version": "7.23.0",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
@@ -2054,9 +2045,9 @@
      }
    },
    "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz",
-      "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.5.tgz",
+      "integrity": "sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==",
      "dev": true,
      "funding": [
        {
@@ -2072,8 +2063,8 @@
        "node": "^14 || ^16 || >=18"
      },
      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0"
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
      }
    },
    "node_modules/@csstools/css-parser-algorithms": {
@@ -2177,9 +2168,9 @@
      }
    },
    "node_modules/@edx/frontend-build": {
-      "version": "12.9.17",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.9.17.tgz",
-      "integrity": "sha512-P4w/jp456o5EQ5l0WVl4JIRHnC5xbG+M1Ce7xX1JKex4YDN3lmoBuiaguPg3n6CBDsNKEiBr48n4u+ug+5UTCw==",
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-13.0.3.tgz",
+      "integrity": "sha512-IwEiNovKAM3Osc8En1l1YeryYaFwmcaR5Z3yMcMpUwRz2ih9Vj9pEPDw8NnwmOrTvTWQQD6QqjnGKmNbBEhugA==",
      "dev": true,
      "dependencies": {
        "@babel/cli": "7.22.5",
@@ -2192,13 +2183,14 @@
        "@babel/preset-react": "7.22.5",
        "@edx/eslint-config": "3.2.0",
        "@edx/new-relic-source-map-webpack-plugin": "2.1.0",
+        "@formatjs/cli": "^6.0.3",
        "@fullhuman/postcss-purgecss": "5.0.0",
        "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
        "@svgr/webpack": "8.1.0",
        "autoprefixer": "10.4.16",
        "babel-jest": "26.6.3",
        "babel-loader": "9.1.3",
-        "babel-plugin-react-intl": "7.9.4",
+        "babel-plugin-formatjs": "^10.4.0",
        "babel-plugin-transform-imports": "2.0.0",
        "babel-polyfill": "6.26.0",
        "chalk": "4.1.2",
@@ -2220,8 +2212,8 @@
        "image-minimizer-webpack-plugin": "3.8.3",
        "jest": "26.6.3",
        "mini-css-extract-plugin": "1.6.2",
-        "postcss": "8.4.30",
-        "postcss-custom-media": "10.0.1",
+        "postcss": "8.4.31",
+        "postcss-custom-media": "10.0.2",
        "postcss-loader": "7.3.3",
        "postcss-rtlcss": "4.0.8",
        "react-dev-utils": "12.0.1",
@@ -3719,6 +3711,26 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@formatjs/cli": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.2.1.tgz",
+      "integrity": "sha512-+INAFMLD+bofdFldBnkMorMQq7M+kaKf0xo9fg5ECV2JhNVziPuAWOJR3O8s6aWSfc4bvzeQ1b+1oaMwxrNRHw==",
+      "dev": true,
+      "bin": {
+        "formatjs": "bin/formatjs"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@formatjs/ecma402-abstract": {
      "version": "1.11.4",
      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
@@ -3805,25 +3817,6 @@
        "tslib": "^2.1.0"
      }
    },
-    "node_modules/@formatjs/intl-numberformat": {
-      "version": "5.7.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-numberformat/-/intl-numberformat-5.7.6.tgz",
-      "integrity": "sha512-ZlZfYtvbVHYZY5OG3RXizoCwxKxEKOrzEe2YOw9wbzoxF3PmFn0SAgojCFGLyNXkkR6xVxlylhbuOPf1dkIVNg==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.4.0",
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/@formatjs/intl-numberformat/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.4.0.tgz",
-      "integrity": "sha512-Mv027hcLFjE45K8UJ8PjRpdDGfR0aManEFj1KzoN8zXNveHGEygpZGfFf/FTTMl+QEVSrPAUlyxaCApvmv47AQ==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      }
-    },
    "node_modules/@formatjs/intl-pluralrules": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.3.3.tgz",
@@ -5603,9 +5596,9 @@
      "dev": true
    },
    "node_modules/@remix-run/router": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
-      "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
@@ -6284,6 +6277,15 @@
        "@babel/types": "^7.0.0"
      }
    },
+    "node_modules/@types/babel__helper-plugin-utils": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__helper-plugin-utils/-/babel__helper-plugin-utils-7.10.1.tgz",
+      "integrity": "sha512-6RaT7i6r2rT6ouIDZ2Cd6dPkq4wn1F8pLyDO+7wPVsL1dodvORiZORImaD6j9FBcHjPGuERE0hhtwkuPNXsO0A==",
+      "dev": true,
+      "dependencies": {
+        "@types/babel__core": "*"
+      }
+    },
    "node_modules/@types/babel__template": {
      "version": "7.4.1",
      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
@@ -6397,15 +6399,6 @@
        "@types/send": "*"
      }
    },
-    "node_modules/@types/fs-extra": {
-      "version": "9.0.13",
-      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
-      "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/glob": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -6526,6 +6519,12 @@
      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
      "dev": true
    },
+    "node_modules/@types/json-stable-stringify": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/@types/json-stable-stringify/-/json-stable-stringify-1.0.34.tgz",
+      "integrity": "sha512-s2cfwagOQAS8o06TcwKfr9Wx11dNGbH2E9vJz1cqV+a/LOyhWNLUNd6JSRYNzvB4d29UuJX2M0Dj9vE1T8fRXw==",
+      "dev": true
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -6626,16 +6625,6 @@
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
    },
-    "node_modules/@types/schema-utils": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/schema-utils/-/schema-utils-2.4.0.tgz",
-      "integrity": "sha512-454hrj5gz/FXcUE20ygfEiN4DxZ1sprUo0V1gqIqkNZ/CzoEzAZEll2uxMsuyz6BYjiQan4Aa65xbTemfzW9hQ==",
-      "deprecated": "This is a stub types definition. schema-utils provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "schema-utils": "*"
-      }
-    },
    "node_modules/@types/send": {
      "version": "0.17.1",
      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
@@ -7752,6 +7741,177 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/babel-plugin-formatjs": {
+      "version": "10.5.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-formatjs/-/babel-plugin-formatjs-10.5.7.tgz",
+      "integrity": "sha512-mJeRdLfmVVqtKWWuEyLZgd2HYEiTv9aCNZT9XAmEg5qmMTR2GA7DrX1H9G4I1FfagsX+7dI7JUvhfbqj0CSvZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "7",
+        "@babel/traverse": "7",
+        "@babel/types": "^7.12.11",
+        "@formatjs/icu-messageformat-parser": "2.7.0",
+        "@formatjs/ts-transformer": "3.13.6",
+        "@types/babel__core": "^7.1.7",
+        "@types/babel__helper-plugin-utils": "^7.10.0",
+        "@types/babel__traverse": "^7.1.7",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.0.tgz",
+      "integrity": "sha512-7uqC4C2RqOaBQtcjqXsSpGRYVn+ckjhNga5T/otFh6MgxRrCJQqvjfbrGLpX1Lcbxdm5WH3Z2WZqt1+Tm/cn/Q==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-skeleton-parser": "1.6.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz",
+      "integrity": "sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/ts-transformer": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-3.13.6.tgz",
+      "integrity": "sha512-qKXnwcPUBPj+0vB+Bu09CR5qgu2BkvFSdPq8Ff+6gh+kx5B0Q0x7mlYS2NQUd9zDthEpMXqAsQeyRLJ8LrC5VA==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/icu-messageformat-parser": "2.7.0",
+        "@types/json-stable-stringify": "^1.0.32",
+        "@types/node": "14 || 16 || 17",
+        "chalk": "^4.0.0",
+        "json-stable-stringify": "^1.0.1",
+        "tslib": "^2.4.0",
+        "typescript": "5"
+      },
+      "peerDependencies": {
+        "ts-jest": ">=27"
+      },
+      "peerDependenciesMeta": {
+        "ts-jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+      "dev": true
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
    "node_modules/babel-plugin-istanbul": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -7822,82 +7982,6 @@
        "@babel/core": "^7.0.0-0"
      }
    },
-    "node_modules/babel-plugin-react-intl": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-7.9.4.tgz",
-      "integrity": "sha512-cMKrHEXrw43yT4M89Wbgq8A8N8lffSquj1Piwov/HVukR7jwOw8gf9btXNsQhT27ccyqEwy+M286JQYy0jby2g==",
-      "deprecated": "this package has been renamed to babel-plugin-formatjs",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/types": "^7.9.5",
-        "@formatjs/ts-transformer": "^2.6.0",
-        "@types/babel__core": "^7.1.7",
-        "@types/fs-extra": "^9.0.1",
-        "@types/schema-utils": "^2.4.0",
-        "fs-extra": "^9.0.0",
-        "intl-messageformat-parser": "^5.3.7",
-        "schema-utils": "^2.6.6"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.5.0.tgz",
-      "integrity": "sha512-wXv36yo+mfWllweN0Fq7sUs7PUiNopn7I0JpLTe3hGu6ZMR4CV7LqK1llhB18pndwpKoafQKb1et2DCJAOW20Q==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ts-transformer": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-2.13.0.tgz",
-      "integrity": "sha512-mu7sHXZk1NWZrQ3eUqugpSYo8x5/tXkrI4uIbFqCEC0eNgQaIcoKgVeDFgDAcgG+cEme2atAUYSFF+DFWC4org==",
-      "dev": true,
-      "dependencies": {
-        "intl-messageformat-parser": "6.1.2",
-        "tslib": "^2.0.1",
-        "typescript": "^4.0"
-      },
-      "peerDependencies": {
-        "ts-jest": "^26.4.0"
-      },
-      "peerDependenciesMeta": {
-        "ts-jest": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ts-transformer/node_modules/intl-messageformat-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.1.2.tgz",
-      "integrity": "sha512-4GQDEPhl/ZMNDKwMsLqyw1LG2IAWjmLJXdmnRcHKeLQzpgtNYZI6lVw1279pqIkRk2MfKb9aDsVFzm565azK5A==",
-      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.5.0",
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
    "node_modules/babel-plugin-transform-imports": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz",
@@ -13250,16 +13334,6 @@
        "tslib": "^2.1.0"
      }
    },
-    "node_modules/intl-messageformat-parser": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-5.5.1.tgz",
-      "integrity": "sha512-TvB3LqF2VtP6yI6HXlRT5TxX98HKha6hCcrg9dwlPwNaedVNuQA9KgBdtWKgiyakyCTYHQ+KJeFEstNKfZr64w==",
-      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/intl-numberformat": "^5.5.2"
-      }
-    },
    "node_modules/invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -17837,6 +17911,18 @@
      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
      "dev": true
    },
+    "node_modules/json-stable-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.2.tgz",
+      "integrity": "sha512-eunSSaEnxV12z+Z73y/j5N37/In40GK4GmsSy+tEHJMxknvqnA7/djeYtAgW0GsWHUfg+847WJjKaEylk2y09g==",
+      "dev": true,
+      "dependencies": {
+        "jsonify": "^0.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -17867,6 +17953,15 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -18258,9 +18353,9 @@
      }
    },
    "node_modules/make-dir/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
      "dev": true,
      "bin": {
        "semver": "bin/semver"
@@ -19724,9 +19819,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "funding": [
        {
@@ -19802,9 +19897,9 @@
      }
    },
    "node_modules/postcss-custom-media": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.1.tgz",
-      "integrity": "sha512-fil7cosvzlIAYmZJPtNFcTH0Er7a3GveEK4q5Y/L24eWQHmiw8Fv/E5DMkVpdbNjkGzJxrvowOSt/Il9HZ06VQ==",
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
+      "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
      "dev": true,
      "funding": [
        {
@@ -19817,10 +19912,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.4",
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.4"
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
      },
      "engines": {
        "node": "^14 || ^16 || >=18"
@@ -21251,12 +21346,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
-      "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.9.0"
+        "@remix-run/router": "1.10.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -21266,13 +21361,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
-      "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.9.0",
-        "react-router": "6.16.0"
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -22491,9 +22586,9 @@
      }
    },
    "node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
@@ -24350,6 +24445,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
      "devOptional": true,
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
  },
  "scripts": {
    "build": "make build",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
@@ -35,7 +35,7 @@
  "devDependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.17",
+    "@edx/frontend-build": "13.0.3",
    "@edx/frontend-platform": "6.0.2",
    "@edx/reactifex": "^2.1.1",
    "@testing-library/dom": "9.3.3",
@@ -50,7 +50,7 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.9",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.17.0",
    "react-test-renderer": "17.0.2",
    "redux": "4.2.1",
    "redux-saga": "1.2.3"
--- a/src/Menu/Menu.jsx
+++ b/src/Menu/Menu.jsx
@@ -14,7 +14,8 @@ MenuTrigger.defaultProps = {
  tag: 'div',
  className: null,
 };
-const MenuTriggerType = <MenuTrigger />.type;
+const MenuTriggerComp = <MenuTrigger />;
+const MenuTriggerType = MenuTriggerComp.type;

 const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
  className: ['menu-content', className].join(' '),