A suite of dependency upgrades (#376)

aligg · web-flow · commit 2fd54c534844 · 2024-12-18T15:19:50.000-08:00
## Ticket Resolves #{TICKET NUMBER OR URL} N/A ## Changes - Upgrade next.js to 15 (Requires us to await params): https://nextjs.org/docs/messages/sync-dynamic-apis - Upgrade eslint to 9 - A few addl upgrades - npm audit ## Context for reviewers Working through the separate dependabot PRs was a bit slow ## Testing Clean run locally: <img width="1470" alt="Screenshot 2024-12-17 at 3 18 09 PM" src="https://github.com/user-attachments/assets/227e09dc-7fd9-4dba-a2f9-1ad3928b7f63" />
diff --git a/app/.storybook/I18nStoryWrapper.tsx b/app/.storybook/I18nStoryWrapper.tsx
@@ -11,7 +11,7 @@ import { defaultLocale, formats, timeZone } from "../src/i18n/config";
 
 const I18nStoryWrapper = (
   Story: React.ComponentType,
-  context: StoryContext
+  context: StoryContext,
 ) => {
   const locale = context.globals.locale ?? defaultLocale;
 
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -26,7 +26,7 @@
     "@trussworks/react-uswds": "^9.0.0",
     "@uswds/uswds": "3.8.1",
     "lodash": "^4.17.21",
-    "next": "^14.0.3",
+    "next": "^15.1.1",
     "next-intl": "^3.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -44,13 +44,13 @@
     "@types/jest": "^29.5.5",
     "@types/jest-axe": "^3.5.5",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.0.0",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^8.36.0",
-    "eslint-config-next": "^14.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.1.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^28.0.0",
     "eslint-plugin-jest-dom": "^5.0.1",
@@ -64,10 +64,10 @@
     "postcss": "^8.4.31",
     "postcss-loader": "^8.0.0",
     "postcss-preset-env": "^10.0.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.4.2",
     "sass": "^1.59.3",
     "sass-loader": "^16.0.0",
-    "storybook": "^8.0.0",
+    "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "typescript": "^5.0.0"
   }
diff --git a/app/src/app/[locale]/layout.tsx b/app/src/app/[locale]/layout.tsx
@@ -14,18 +14,17 @@ export const metadata: Metadata = {
 
 interface LayoutProps {
   children: React.ReactNode;
-  params: {
-    locale: string;
-  };
+  params: Promise<{ locale: string }>;
 }
 
-export default function RootLayout({ children, params }: LayoutProps) {
+export default async function RootLayout({ children, params }: LayoutProps) {
+  const { locale } = await params;
   return (
-    <html lang={params.locale}>
+    <html lang={locale}>
       <body>
         {/* Separate layout component for the inner-body UI elements since Storybook
             and tests trip over the fact that this file renders an <html> tag */}
-        <Layout locale={params.locale}>{children}</Layout>
+        <Layout locale={locale}>{children}</Layout>
       </body>
     </html>
   );
diff --git a/app/src/app/[locale]/page.tsx b/app/src/app/[locale]/page.tsx
@@ -4,12 +4,13 @@ import { getTranslations } from "next-intl/server";
 
 import { View } from "./view";
 
-interface RouteParams {
-  locale: string;
-}
-
-export async function generateMetadata({ params }: { params: RouteParams }) {
-  const t = await getTranslations({ locale: params.locale });
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("home.title"),
   };
diff --git a/app/src/components/Layout.test.tsx b/app/src/components/Layout.test.tsx
@@ -8,7 +8,7 @@ describe("Layout", () => {
     render(
       <Layout locale="en-US">
         <h1>child</h1>
-      </Layout>
+      </Layout>,
     );
 
     const header = screen.getByRole("heading", { name: /child/i, level: 1 });
@@ -20,7 +20,7 @@ describe("Layout", () => {
     const { container } = render(
       <Layout locale="en-US">
         <h1>child</h1>
-      </Layout>
+      </Layout>,
     );
     const results = await axe(container);
 
diff --git a/app/src/i18n/getMessagesWithFallbacks.ts b/app/src/i18n/getMessagesWithFallbacks.ts
@@ -15,13 +15,13 @@ async function importMessages(locale: Locale) {
  * from the current locale, the missing key will fallback to the default locale
  */
 export async function getMessagesWithFallbacks(
-  requestedLocale: string = defaultLocale
+  requestedLocale: string = defaultLocale,
 ) {
   const isValidLocale = locales.includes(requestedLocale as Locale); // https://github.com/microsoft/TypeScript/issues/26255
   if (!isValidLocale) {
     console.error(
       "Unsupported locale was requested. Falling back to the default locale.",
-      { locale: requestedLocale, defaultLocale }
+      { locale: requestedLocale, defaultLocale },
     );
     requestedLocale = defaultLocale;
   }
diff --git a/app/src/i18n/server.ts b/app/src/i18n/server.ts
@@ -8,7 +8,8 @@ import { getMessagesWithFallbacks } from "./getMessagesWithFallbacks";
  * This method is used behind the scenes by `next-intl/plugin`, which is setup in next.config.js.
  * @see https://next-intl-docs.vercel.app/docs/usage/configuration#nextconfigjs
  */
-export default getRequestConfig(async ({ locale }) => {
+export default getRequestConfig(async ({ requestLocale }) => {
+  const locale = await requestLocale;
   return {
     formats,
     messages: await getMessagesWithFallbacks(locale),
diff --git a/app/tests/react-utils.tsx b/app/tests/react-utils.tsx
@@ -33,7 +33,7 @@ export * from "@testing-library/react";
 // 2. Then override the "@testing-library/react" render method
 export function render(
   ui: React.ReactElement,
-  options: Omit<RenderOptions, "wrapper"> = {}
+  options: Omit<RenderOptions, "wrapper"> = {},
 ) {
   return _render(ui, { wrapper: GlobalProviders, ...options });
 }

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export * from "@testing-library/react";`
`33`	`33`	`// 2. Then override the "@testing-library/react" render method`
`34`	`34`	`export function render(`
`35`	`35`	`ui: React.ReactElement,`
`36`		`- options: Omit<RenderOptions, "wrapper"> = {}`
	`36`	`+ options: Omit<RenderOptions, "wrapper"> = {},`
`37`	`37`	`) {`
`38`	`38`	`return _render(ui, { wrapper: GlobalProviders, ...options });`
`39`	`39`	`}`