[BOW-107] Upgrade to Next 14 (#113)

* Upgrade to Next 13.5 * 13.5.4 * Fix revalidatePath warnings * dedupe * DEBUGGING * Upgrade to Next 14 * Revert "DEBUGGING" This reverts commit b438d43. * Bump React versions * Update useOptimistic * Server actions no longer experimental * Upgrade Next to 14.1.0 * Build fixes * Fix yarn.lock * Fix prisma * Fix typecheck
badger-media · Jan 28, 2024 · 83aa2b0 · 83aa2b0
1 parent b82c59a
commit 83aa2b0
Show file tree

Hide file tree

Showing 12 changed files with 3,311 additions and 3,530 deletions.
diff --git a/desktop/e2e/complete/serverAPI.ts b/desktop/e2e/complete/serverAPI.ts
@@ -102,7 +102,7 @@ export async function directlyCreateTestMedia(
   // We need to access server's env vars, as desktop doesn't have the S3 ones.
   const { parsed: env, error } = dotenvFlow.load(
     dotenvFlow
-      .listDotenvFiles(path.resolve(__dirname + "../../../../server"))
+      .listFiles(path.resolve(__dirname + "../../../../server"))
       .filter((x) => existsSync(x)),
   );
   if (!env) {

diff --git a/desktop/package.json b/desktop/package.json
@@ -77,8 +77,8 @@
     "@trpc/server": "^10.35.0",
     "@types/progress-stream": "^2.0.2",
     "@types/qs": "^6.9.9",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@types/uuid": "^9.0.2",
     "@types/which": "^3.0.0",
     "bowser-server": "workspace:*",

diff --git a/desktop/tsconfig.json b/desktop/tsconfig.json
@@ -5,7 +5,7 @@
     "allowImportingTsExtensions": true,
     "downlevelIteration": true,
     "paths": {
-      "@/*": ["../server/*"]
-    }
-  }
+      "@/*": ["../server/*"],
+    },
+  },
 }
diff --git a/server/app/global-error.tsx b/server/app/global-error.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* This is the default Next.js error component but it doesn't allow omitting the statusCode property yet. */}
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <NextError statusCode={undefined as any} />
+      </body>
+    </html>
+  );
+}
diff --git a/server/app/shows/[show_id]/ShowItemsList.tsx b/server/app/shows/[show_id]/ShowItemsList.tsx
@@ -13,7 +13,7 @@ import {
 } from "@hello-pangea/dnd";
 import Spinner from "@/app/_assets/spinner.svg";
 import React, {
-  experimental_useOptimistic as useOptimistic,
+  useOptimistic,
   forwardRef,
   useCallback,
   useMemo,

diff --git a/server/app/shows/[show_id]/rundown/[rundown_id]/RundownItems.tsx b/server/app/shows/[show_id]/rundown/[rundown_id]/RundownItems.tsx
@@ -3,7 +3,6 @@
 import {
   Media,
   MediaProcessingTask,
-  MediaState,
   Rundown,
   RundownItem,
 } from "@bowser/prisma/client";
@@ -35,8 +34,7 @@ import { identity } from "lodash";
 import {
   ReactNode,
   useCallback,
-  useEffect,
-  experimental_useOptimistic as useOptimistic,
+  useOptimistic,
   useRef,
   useTransition,
 } from "react";

diff --git a/server/next.config.js b/server/next.config.js
@@ -14,8 +14,8 @@ const sentryRelease =
 const nextConfig = {
   output: "standalone",
   experimental: {
-    serverActions: true,
     instrumentationHook: true,
+    serverComponentsExternalPackages: ["@aws-sdk/s3-request-presigner"],
   },
   transpilePackages: ["@bowser/prisma"],
   webpack: (config, { isServer }) => {

diff --git a/server/package.json b/server/package.json
@@ -26,40 +26,42 @@
     "@bowser/testing": "workspace:*",
     "@hello-pangea/dnd": "^16.3.0",
     "@hookform/resolvers": "^3.1.1",
+    "@prisma/client": "latest",
     "@sentry/nextjs": "latest",
     "@sentry/utils": "^7.69.0",
     "@tailwindcss/forms": "^0.5.4",
     "@tanstack/react-table": "^8.10.7",
     "@trpc/server": "^10.34.0",
     "@types/lodash": "^4.14.196",
     "@types/node": "20.4.2",
-    "@types/react": "18.2.15",
+    "@types/react": "^18.2.33",
     "@types/react-datepicker": "^4.15.0",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "client-only": "^0.0.1",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "date-fns": "^2.30.0",
     "debug": "^4.3.4",
     "eslint": "8.45.0",
-    "eslint-config-next": "13.5.6",
+    "eslint-config-next": "^14.1.0",
     "eslint-plugin-react": "latest",
     "google-auth-library": "^9.2.0",
     "googleapis": "^128.0.0",
     "lodash": "^4.17.21",
-    "next": "13.5.6",
-    "react": "18.3.0-canary-1a001dac6-20230812",
+    "next": "^14.1.0",
+    "prisma": "latest",
+    "react": "18.3.0-canary-8c8ee9ee6-20231026",
     "react-day-picker": "^8.8.0",
-    "react-dom": "18.3.0-canary-1a001dac6-20230812",
+    "react-dom": "18.3.0-canary-8c8ee9ee6-20231026",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.45.2",
     "react-icons": "^4.10.1",
     "server-only": "^0.0.1",
     "superjson": "^1.13.1",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.1",
     "ts-expect": "^1.3.0",
     "tus-js-client": "^3.1.0",
     "typescript": "5.1.6",
@@ -72,6 +74,7 @@
     "@playwright/test": "^1.37.0",
     "@prisma/nextjs-monorepo-workaround-plugin": "toniopelo/prisma-nextjs-monorepo-workaround-plugin",
     "@trpc/client": "^10.44.1",
+    "@types/debug": "^4.1.12",
     "@types/jest": "^29.5.9",
     "@types/shelljs": "^0.8.12",
     "@vitejs/plugin-react": "^4.0.3",
@@ -86,7 +89,7 @@
     "prettier-plugin-tailwindcss": "^0.5.9",
     "shelljs": "^0.8.5",
     "tailwindcss": "^3.3.3",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.1",
     "tsx": "^3.12.7",
     "vitest": "^0.33.0"

diff --git a/server/tsconfig.json b/server/tsconfig.json
@@ -17,20 +17,20 @@
     "downlevelIteration": true,
     "plugins": [
       {
-        "name": "next"
-      }
+        "name": "next",
+      },
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": ["./*"],
+    },
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
     "../utility/testing/scripts/run-integration-tests.mts",
-    "../utility/testing/vitest-config-integration-base.ts"
+    "../utility/testing/vitest-config-integration-base.ts",
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/utility/components/alert-dialog.tsx b/utility/components/alert-dialog.tsx
@@ -11,10 +11,9 @@ const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = ({
-  className,
   ...props
 }: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props} />
+  <AlertDialogPrimitive.Portal {...props} />
 );
 AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
 

diff --git a/utility/components/dialog.tsx b/utility/components/dialog.tsx
@@ -10,11 +10,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;