FE-348: Update Next to 12.2 and use SWC instead of Babel (#7291)

Author: markerikson

.babelrc

@@ -1,13 +1,20 @@
 const { patchWebpackConfig } = require("next-global-css");
 const transpileModules = require("next-transpile-modules");
 const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin");
+const withPlugins = require("next-compose-plugins");
+
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
 const withTM = transpileModules(["bvaughn-architecture-demo"]);
 
 const baseNextConfig = {
   // bumping Next from 12.0.9 to 12.1.0 required this as a temp WAR
   // (see https://github.com/vercel/next.js/pull/34500)
-  experimental: {},
+  experimental: {
+    browsersListForSwc: true,
+  },
 
   eslint: {
     // which folders to run ESLint on during production builds (next build)
@@ -149,4 +156,4 @@ const baseNextConfig = {
   },
 };
 
-module.exports = withTM(baseNextConfig);
+module.exports = withPlugins([withTM, withBundleAnalyzer], baseNextConfig);

next.config.js

@@ -69,7 +69,7 @@
     "logrocket": "^2.2.1",
     "logrocket-react": "^5.0.1",
     "mixpanel-browser": "^2.43.0",
-    "next": "^12.1.6",
+    "next": "^12.2",
     "next-global-css": "^1.3.1",
     "parse-script-tags": "^0.1.7",
     "polished": "^4.2.2",
@@ -117,6 +117,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@babel/types": "^7.14.8",
     "@jest/console": "^28.0.2",
+    "@next/bundle-analyzer": "^12.2.0",
     "@recordreplay/playwright": "^1.18.3",
     "@recordreplay/sourcemap-upload-cli": "^0.1.1",
     "@replayio/playwright": "^0.2.1",
@@ -185,6 +186,7 @@
     "jest-environment-jsdom": "^28.0.2",
     "jest-in-case": "^1.0.2",
     "mini-css-extract-plugin": "^2.6.0",
+    "next-compose-plugins": "^2.2.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
@@ -206,7 +208,7 @@
     "webpack-retry-chunk-load-plugin": "^3.0.0"
   },
   "browserslist": [
-    "defaults"
+    "chrome 95"
   ],
   "repository": {
     "type": "git",

package.json

@@ -44,7 +44,7 @@ async function initAuthRequest(key: string) {
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const key = getQueryValue(req.query.key);
+  const key = getQueryValue(req.query.key!);
   if (!key) {
     res.statusCode = 400;
     res.statusMessage = "Missing parameter";

pages/api/browser/auth.ts

@@ -84,14 +84,14 @@ async function fetchToken(code: string, verifier: string): Promise<Token> {
 }
 
 function redirectToLogin(req: NextApiRequest, res: NextApiResponse) {
-  const message = getQueryValue(req.query.error_description);
+  const message = getQueryValue(req.query.error_description!);
 
   res.redirect("/browser/error?type=auth&message=" + encodeURIComponent(message));
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const code = getQueryValue(req.query.code);
-  const state = getQueryValue(req.query.state);
+  const code = getQueryValue(req.query.code!);
+  const state = getQueryValue(req.query.state!);
   const browserAuth = req.cookies["replay-browser-auth"];
 
   if (!code || !state || !browserAuth) {