Upgrade deps

app/components/Avatar.tsx

@@ -41,6 +41,8 @@ export function Avatar({
       alt=""
       width={dimensions[size]}
       height={dimensions[size]}
+      // https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
+      // eslint-disable-next-line react/no-unknown-property
       onError={() => setIsErrored(true)}
       {...rest}
     />

app/components/FormWithConfirm.tsx

@@ -48,6 +48,7 @@ export function FormWithConfirm({
         </div>
       </Dialog>
       {React.cloneElement(children, {
+        // @ts-expect-error broke with @types/react upgrade. TODO: figure out narrower type than React.ReactNode
         onClick: openDialog,
       })}
     </>

app/modules/auth/DiscordStrategy.server.ts

@@ -52,7 +52,10 @@ export class DiscordStrategy extends OAuth2Strategy<
         callbackURL: new URL("/auth/callback", envVars.BASE_URL).toString(),
       },
       async ({ accessToken }) => {
-        const authHeader = ["Authorization", `Bearer ${accessToken}`];
+        const authHeader: [string, string] = [
+          "Authorization",
+          `Bearer ${accessToken}`,
+        ];
         const discordResponses = await Promise.all([
           fetch("https://discord.com/api/users/@me", {
             headers: [authHeader],

app/routes/a.$slug.tsx

@@ -1,18 +1,22 @@
 import Markdown from "markdown-to-jsx";
 import { Main } from "~/components/Main";
-import { json, type LoaderArgs, type MetaFunction } from "@remix-run/node";
+import {
+  json,
+  type SerializeFrom,
+  type LoaderArgs,
+  type MetaFunction,
+} from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import * as React from "react";
 import { articleBySlug } from "~/modules/articles";
 import invariant from "tiny-invariant";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import { makeTitle } from "~/utils/strings";
 import { articlePreviewUrl } from "~/utils/urls";
 import { notFoundIfFalsy } from "~/utils/remix";
 
 export const meta: MetaFunction = (args) => {
   invariant(args.params["slug"]);
-  const data = args.data as Nullable<UseDataFunctionReturn<typeof loader>>;
+  const data = args.data as SerializeFrom<typeof loader> | null;
 
   if (!data) return {};
 

app/routes/calendar/$id/index.tsx

@@ -1,3 +1,4 @@
+import type { SerializeFrom } from "@remix-run/node";
 import {
   json,
   type MetaFunction,
@@ -5,7 +6,6 @@ import {
   type LoaderArgs,
 } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import { Link } from "@remix-run/react/dist/components";
 import clsx from "clsx";
 import * as React from "react";
@@ -41,7 +41,7 @@ export const links: LinksFunction = () => {
 };
 
 export const meta: MetaFunction = (args) => {
-  const data = args.data as Nullable<UseDataFunctionReturn<typeof loader>>;
+  const data = args.data as SerializeFrom<typeof loader>;
 
   if (!data) return {};
 

app/routes/calendar/$id/report-winners.tsx

@@ -1,3 +1,4 @@
+import type { SerializeFrom } from "@remix-run/node";
 import {
   type ActionFunction,
   type LoaderArgs,
@@ -25,7 +26,6 @@ import clsx from "clsx";
 import { UserCombobox } from "~/components/Combobox";
 import { FormMessage } from "~/components/FormMessage";
 import { FormErrors } from "~/components/FormErrors";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import type { Unpacked } from "~/utils/types";
 import { calendarEventPage } from "~/utils/urls";
 import { useTranslation } from "react-i18next";
@@ -274,7 +274,7 @@ function Team({
   onRemoveTeam?: () => void;
   hidden: boolean;
   initialPlacement: string;
-  initialValues?: Unpacked<UseDataFunctionReturn<typeof loader>["winners"]>;
+  initialValues?: Unpacked<SerializeFrom<typeof loader>["winners"]>;
 }) {
   const { t } = useTranslation("calendar");
   const teamNameId = React.useId();

app/routes/calendar/index.tsx

@@ -1,7 +1,6 @@
-import type { LoaderArgs, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs, MetaFunction, SerializeFrom } from "@remix-run/node";
 import { json, type LinksFunction } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import clsx from "clsx";
 import { addDays, addMonths, subDays, subMonths } from "date-fns";
 import React from "react";
@@ -32,7 +31,7 @@ export const links: LinksFunction = () => {
 };
 
 export const meta: MetaFunction = (args) => {
-  const data = args.data as Nullable<UseDataFunctionReturn<typeof loader>>;
+  const data = args.data as SerializeFrom<typeof loader> | null;
 
   if (!data) return {};
 
@@ -227,7 +226,7 @@ function WeekLinks() {
 function WeekLinkTitle({
   week,
 }: {
-  week: Unpacked<UseDataFunctionReturn<typeof loader>["weeks"]>;
+  week: Unpacked<SerializeFrom<typeof loader>["weeks"]>;
 }) {
   const { t } = useTranslation("calendar");
   const data = useLoaderData<typeof loader>();
@@ -278,7 +277,7 @@ function WeekLinkTitle({
 }
 
 function getEventsCountPerWeek(
-  startTimes: UseDataFunctionReturn<typeof loader>["nearbyStartTimes"]
+  startTimes: SerializeFrom<typeof loader>["nearbyStartTimes"]
 ) {
   const result = new Map<number, number>();
 
@@ -313,7 +312,7 @@ function EventsToReport() {
 function EventsList({
   events,
 }: {
-  events: UseDataFunctionReturn<typeof loader>["events"];
+  events: SerializeFrom<typeof loader>["events"];
 }) {
   const { t, i18n } = useTranslation("calendar");
 
@@ -419,11 +418,8 @@ function EventsList({
   );
 }
 
-function eventsGroupedByDay(
-  events: UseDataFunctionReturn<typeof loader>["events"]
-) {
-  const result: Array<[Date, UseDataFunctionReturn<typeof loader>["events"]]> =
-    [];
+function eventsGroupedByDay(events: SerializeFrom<typeof loader>["events"]) {
+  const result: Array<[Date, SerializeFrom<typeof loader>["events"]]> = [];
 
   for (const calendarEvent of events) {
     const previousIterationEvents = result[result.length - 1] ?? null;

app/routes/calendar/new.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import type { Badge as BadgeType, CalendarEventTag } from "~/db/types";
 import { CALENDAR_EVENT } from "~/constants";
 import { Button } from "~/components/Button";
+import type { SerializeFrom } from "@remix-run/node";
 import {
   json,
   redirect,
@@ -47,7 +48,6 @@ import {
 import { calendarEventPage } from "~/utils/urls";
 import { makeTitle } from "~/utils/strings";
 import { i18next } from "~/modules/i18n";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import { canEditCalendarEvent } from "~/permissions";
 import { DateInput } from "~/components/DateInput";
 
@@ -61,7 +61,7 @@ export const links: LinksFunction = () => {
 };
 
 export const meta: MetaFunction = (args) => {
-  const data = args.data as Nullable<UseDataFunctionReturn<typeof loader>>;
+  const data = args.data as SerializeFrom<typeof loader> | null;
 
   if (!data) return {};
 

app/routes/u.$identifier.tsx

@@ -1,7 +1,11 @@
-import type { LinksFunction, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type {
+  LinksFunction,
+  LoaderArgs,
+  MetaFunction,
+  SerializeFrom,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
-import type { UseDataFunctionReturn } from "@remix-run/react/dist/components";
 import { countries } from "countries-list";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -30,7 +34,7 @@ export const handle = {
 
 export const userParamsSchema = z.object({ identifier: z.string() });
 
-export type UserPageLoaderData = UseDataFunctionReturn<typeof loader>;
+export type UserPageLoaderData = SerializeFrom<typeof loader>;
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   const locale = await i18next.getLocale(request);

package.json

@@ -27,12 +27,12 @@
     "cf": "npm run test:unit && npm run lint:styles -- --fix && npm run lint:ts -- --fix && npm run prettier:write && npm run typecheck"
   },
   "dependencies": {
-    "@faker-js/faker": "^7.4.0",
+    "@faker-js/faker": "^7.5.0",
     "@headlessui/react": "^1.6.6",
     "@popperjs/core": "^2.11.6",
-    "@remix-run/node": "^1.6.8",
-    "@remix-run/react": "^1.6.8",
-    "@remix-run/serve": "^1.6.8",
+    "@remix-run/node": "^1.7.0",
+    "@remix-run/react": "^1.7.0",
+    "@remix-run/serve": "^1.7.0",
     "better-sqlite3": "^7.6.2",
     "clsx": "^1.2.1",
     "countries-list": "^2.6.1",
@@ -49,8 +49,8 @@
     "node-cron": "3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-flip-toolkit": "^7.0.14",
-    "react-i18next": "^11.18.4",
+    "react-flip-toolkit": "^7.0.16",
+    "react-i18next": "^11.18.5",
     "react-popper": "^2.3.0",
     "remix-auth": "^3.2.2",
     "remix-auth-oauth2": "^1.3.0",
@@ -60,20 +60,20 @@
     "zod": "^3.18.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.6.8",
-    "@remix-run/eslint-config": "^1.6.8",
+    "@remix-run/dev": "^1.7.0",
+    "@remix-run/eslint-config": "^1.7.0",
     "@types/better-sqlite3": "^7.6.0",
     "@types/i18next-fs-backend": "^1.1.2",
-    "@types/node-cron": "^3.0.2",
-    "@types/react": "^18.0.17",
+    "@types/node-cron": "^3.0.3",
+    "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.34.0",
-    "@typescript-eslint/parser": "^5.34.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "cross-env": "^7.0.3",
-    "cypress": "^10.6.0",
-    "dotenv": "^16.0.1",
-    "eslint": "^8.22.0",
-    "eslint-plugin-react": "^7.30.1",
+    "cypress": "^10.7.0",
+    "dotenv": "^16.0.2",
+    "eslint": "^8.23.0",
+    "eslint-plugin-react": "^7.31.5",
     "eslint-plugin-react-hooks": "^4.6.0",
     "ley": "^0.7.1",
     "prettier": "^2.7.1",
@@ -85,7 +85,7 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "tsm": "^2.2.2",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
     "uvu": "^0.5.6"
   },
   "engines": {