Update to react-router v7 with codemod

app/lib/color-scheme.server.ts

@@ -1,4 +1,4 @@
-import { createCookie } from "@remix-run/node";
+import { createCookie } from "react-router";
 import type { ColorScheme } from "./color-scheme";
 
 let cookie = createCookie("color-scheme", {

app/lib/color-scheme.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useNavigation, useRouteLoaderData } from "@remix-run/react";
+import { useNavigation, useRouteLoaderData } from "react-router";
 import type { loader as rootLoader } from "~/root";
 import { useLayoutEffect } from "~/ui/primitives/utils";
 

app/lib/http.server.ts

@@ -1,4 +1,4 @@
-import { redirect } from "@remix-run/node";
+import { redirect } from "react-router";
 import redirectsFileContents from "../../_redirects?raw";
 
 export const CACHE_CONTROL = {
@@ -85,7 +85,7 @@
   if (typeof code === "string") {
     try {
       code = parseInt(code.trim(), 10);
     } catch (_) {
       return defaultCode;
     }
   }

app/lib/meta/meta.ts

@@ -1,4 +1,4 @@
-import type { MetaDescriptor } from "@remix-run/node";
+import type { MetaDescriptor } from "react-router";
 
 type CustomMetaArgs = {
   title: string;

app/root.tsx

@@ -9,9 +9,9 @@
   useLoaderData,
   useMatches,
   useRouteError,
-} from "@remix-run/react";
-import { data } from "@remix-run/node";
-import type { LoaderFunctionArgs } from "@remix-run/node";
+  data,
+} from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
 import {
   load as loadFathom,
   type LoadOptions as FathomLoadOptions,
@@ -90,7 +90,7 @@
   forceDark,
   darkBg,
   noIndex,
   isDev,
 }: DocumentProps) {
   let colorScheme = useColorScheme();
   let matches = useMatches();
@@ -171,6 +171,7 @@
         // this img tag simply forces the icons to be loaded at a higher
         // priority than the scripts (chrome only for now)
         // @ts-expect-error -- silly React pretending this attribute doesn't exist
+        // eslint-disable-next-line react/no-unknown-property
         fetchpriority="high"
       />
     </Document>

app/routes.ts

@@ -1,4 +1,4 @@
-import { type RouteConfig } from "@remix-run/route-config";
-import { flatRoutes } from "@remix-run/fs-routes";
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
 
 export const routes: RouteConfig = flatRoutes();

app/routes/$.tsx

@@ -1,6 +1,6 @@
 import { handleRedirects } from "~/lib/http.server";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { data, redirect } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "react-router";
+import { data, redirect } from "react-router";
 import { getRepoDoc } from "~/lib/gh-docs";
 
 // We use the catch-all route to attempt to find a doc for the given path. If a
@@ -63,7 +63,7 @@
     // cache but we should probably fix it anyway.
     return redirect(`/docs/${lang}/${ref}/${params["*"]}`);
     // eslint-disable-next-line no-empty -- should probably do something here
   } catch (_) {}
   throw data({}, { status: 404 });
 };
 

app/routes/[_]actions.color-scheme.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunctionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "react-router";
 import {
   serializeColorScheme,
   validateColorScheme,

app/routes/[_]actions.newsletter.tsx

@@ -1,5 +1,5 @@
-import { data } from "@remix-run/node";
-import type { ActionFunctionArgs } from "@remix-run/node";
+import { data } from "react-router";
+import type { ActionFunctionArgs } from "react-router";
 import { subscribeToNewsletter } from "~/lib/convertkit";
 import { requirePost } from "~/lib/http.server";
 

app/routes/_extras.blog.$slug.tsx

@@ -1,6 +1,9 @@
-import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import type {
+  LinksFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
+import { useLoaderData } from "react-router";
 import invariant from "tiny-invariant";
 
 import { getBlogPost } from "~/lib/blog.server";

app/routes/_extras.blog._index.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { useLoaderData, Link } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { useLoaderData, Link } from "react-router";
 import { Subscribe } from "~/ui/subscribe";
 import { getBlogPostListings } from "~/lib/blog.server";
 

app/routes/_extras.blog.rss[.xml].tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderFunction } from "react-router";
 import { getBlogPostListings } from "~/lib/blog.server";
 import { Feed } from "feed";
 import { CACHE_CONTROL } from "~/lib/http.server";

app/routes/_extras.brand.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "react-router";
 import type { FC } from "react";
 import cx from "clsx";
 import { getMeta } from "~/lib/meta";

app/routes/_extras.resources.$.tsx

@@ -1,6 +1,6 @@
 // Pull full readme for this page from GitHub
-import { type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { type LoaderFunctionArgs, type MetaFunction } from "react-router";
+import { useLoaderData } from "react-router";
 import invariant from "tiny-invariant";
 import { getResource } from "~/lib/resources.server";
 import { InitCodeblock, ResourceTag } from "~/ui/resources";

app/routes/_extras.resources._index/data.server.ts

@@ -4,7 +4,7 @@ import {
   type Resource,
 } from "~/lib/resources.server";
 import { categories } from "./ui";
-import { redirect } from "@remix-run/node";
+import { redirect } from "react-router";
 import { octokit } from "~/lib/github.server";
 
 export async function getResourcesForRequest(request: Request) {

app/routes/_extras.resources._index/route.tsx

@@ -1,5 +1,5 @@
-import { type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { type LoaderFunctionArgs, type MetaFunction } from "react-router";
+import { useLoaderData } from "react-router";
 import { ResourceTag } from "~/ui/resources";
 import { getResourcesForRequest } from "./data.server";
 import {

app/routes/_extras.resources._index/ui.tsx

@@ -1,6 +1,6 @@
 import type { Category, Resource } from "~/lib/resources.server";
 import { InitCodeblock, ResourceTag } from "~/ui/resources";
-import { Link, useSearchParams } from "@remix-run/react";
+import { Link, useSearchParams } from "react-router";
 import cx from "clsx";
 import iconsHref from "~/icons.svg";
 import { slugify } from "~/ui/primitives/utils";

app/routes/_extras.showcase.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { useLoaderData } from "react-router";
 import { Fragment, forwardRef, useRef } from "react";
 import type { ShowcaseExample } from "~/lib/showcase.server";
 import { showcaseExamples } from "~/lib/showcase.server";

app/routes/_extras.tsx

@@ -1,5 +1,5 @@
-import type { HeadersFunction } from "@remix-run/node";
-import { Outlet } from "@remix-run/react";
+import type { HeadersFunction } from "react-router";
+import { Outlet } from "react-router";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { DocSearchModal } from "~/ui/docsearch";
 import { Footer } from "~/ui/footer";

app/routes/_marketing._index.tsx

@@ -1,7 +1,9 @@
-import { useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
-import { data } from "@remix-run/node";
-import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
+import { useLoaderData, data } from "react-router";
+import type {
+  MetaFunction,
+  HeadersFunction,
+  LoaderFunctionArgs,
+} from "react-router";
 import { OutlineButtonLink, PrimaryButtonLink } from "~/ui/buttons";
 import { getMarkdownTutPage } from "~/lib/mdtut.server";
 import "~/styles/index.css";

app/routes/_marketing.newsletter.tsx

@@ -1,5 +1,5 @@
-import { useNavigation, useActionData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import { useNavigation, useActionData } from "react-router";
+import type { MetaFunction } from "react-router";
 import { useEffect, useRef } from "react";
 import { Subscribe } from "~/ui/subscribe";
 import type { action } from "~/routes/[_]actions.newsletter";

app/routes/_marketing.tsx

@@ -4,7 +4,7 @@
  * use any `dark:` variants, just style the pages with the colors in the
  * designs.
  */
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 import { Header } from "~/ui/header";
 import { Footer } from "~/ui/footer";

app/routes/conf.2022._index.tsx

@@ -1,7 +1,5 @@
-import { data } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import type { MetaFunction } from "@remix-run/react";
+import { data, useLoaderData } from "react-router";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { OutlineButtonLink, primaryButtonLinkClass } from "~/ui/buttons";
 import "~/styles/index.css";
 import { Fragment } from "react";

app/routes/conf.2022._inner.coc.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022._inner.discord.tsx

@@ -1,5 +1,5 @@
-import { Link } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import { Link } from "react-router";
+import type { MetaFunction } from "react-router";
 import { primaryButtonLinkClass } from "~/ui/buttons";
 import { Discord } from "~/ui/icons";
 

app/routes/conf.2022._inner.safety.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022._inner.schedule._index.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
+import type { LoaderFunction } from "react-router";
+import { redirect } from "react-router";
 
 export const loader: LoaderFunction = () => redirect("/conf/schedule/may-25");

app/routes/conf.2022._inner.schedule.may-24.tsx

@@ -1,5 +1,5 @@
-import type { MetaFunction } from "@remix-run/react";
-import { Link } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
+import { Link } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022._inner.schedule.may-25.tsx

@@ -1,6 +1,5 @@
-import { data } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import { data, Link, useLoaderData } from "react-router";
+import type { MetaFunction } from "react-router";
 import { getSchedule } from "~/lib/conf2022.server";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { slugify } from "~/ui/primitives/utils";

app/routes/conf.2022._inner.schedule.may-26.tsx

@@ -1,5 +1,5 @@
-import { Link, useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import { Link, useLoaderData } from "react-router";
+import type { MetaFunction } from "react-router";
 import { Discord } from "~/ui/icons";
 
 export const meta: MetaFunction = () => {

app/routes/conf.2022._inner.schedule.tsx

@@ -1,6 +1,6 @@
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "~/ui/primitives/tabs";
-import { Link, Outlet, useMatches, useNavigate } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import { Link, Outlet, useMatches, useNavigate } from "react-router";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022._inner.speakers.$speakerSlug.tsx

@@ -1,13 +1,12 @@
-import type { LoaderFunctionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import {
   Link,
   useParams,
   useLoaderData,
   isRouteErrorResponse,
   useRouteError,
-} from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
-import { data } from "@remix-run/node";
+  data,
+} from "react-router";
 import { getSpeakers, getTalks } from "~/lib/conf2022.server";
 import "~/styles/conf-speaker.css";
 import { CACHE_CONTROL } from "~/lib/http.server";

app/routes/conf.2022._inner.speakers._index.tsx

@@ -1,3 +1,3 @@
-import { redirect } from "@remix-run/node";
+import { redirect } from "react-router";
 
 export const loader = () => redirect("/conf/2022#speakers");

app/routes/conf.2022._inner.sponsor.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022._inner.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 export default function InnerLayout() {
   return (

app/routes/conf.2022._inner.venue.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import type { MetaFunction } from "@remix-run/react";
-import { useLoaderData, Link } from "@remix-run/react";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { useLoaderData, Link } from "react-router";
 import { primaryButtonLinkClass } from "~/ui/buttons";
 
 export const meta: MetaFunction = () => {

app/routes/conf.2022._inner.workshops.tsx

@@ -1,5 +1,5 @@
 import { primaryButtonLinkClass } from "~/ui/buttons";
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2022.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Outlet, useLocation } from "@remix-run/react";
+import { Outlet, useLocation } from "react-router";
 import { Link, NavLink } from "~/ui/link";
 import { Wordmark } from "~/ui/logo";
 import { Discord, GitHub, Twitter, YouTube } from "~/ui/icons";

app/routes/conf.2023._index.tsx

@@ -1,7 +1,5 @@
-import { data } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
+import { data, useLoaderData } from "react-router";
+import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import cx from "clsx";
 import {
   secondaryButtonLinkClass,

app/routes/conf.2023._inner.schedule.tsx

@@ -4,11 +4,10 @@ import {
   useLocation,
   useNavigate,
   useNavigation,
-} from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+  data,
+} from "react-router";
+import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import cx from "clsx";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { data } from "@remix-run/node";
 import { formatDate, getSchedules } from "~/lib/conf2023.server";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { slugify } from "~/ui/primitives/utils";

app/routes/conf.2023._inner.speakers.$speakerSlug.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { data } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { data, useLoaderData } from "react-router";
 import "~/styles/conf-speaker.css";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { getSpeakerBySlug, getConfSessions } from "~/lib/conf2023.server";

app/routes/conf.2023._inner.speakers._index.tsx

@@ -1,3 +1,3 @@
-import { redirect } from "@remix-run/node";
+import { redirect } from "react-router";
 
 export const loader = () => redirect("/conf#speakers");

app/routes/conf.2023._inner.sponsor.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2023._inner.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react";
+import { Outlet } from "react-router";
 
 export default function InnerLayout() {
   return (

app/routes/conf.2023.coc.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [

app/routes/conf.2023.tsx

@@ -4,9 +4,9 @@ import {
   useLocation,
   useLoaderData,
   useMatches,
-} from "@remix-run/react";
-import { data } from "@remix-run/node";
-import type { LoaderFunctionArgs } from "@remix-run/node";
+  data,
+} from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
 import { Link, NavLink } from "~/ui/link";
 import { Wordmark } from "~/ui/logo";
 import { Discord, GitHub, Twitter, YouTube } from "~/ui/icons";