Feat/migrate to react router 7

[DennisKraaijeveld]

Made the first changes to go from RemixV2 to React Router 7. These are only the basic changes to be made and I'm working on the dev and prod server, but they don't seem to work out of the box.

Sentry did not work so this has been updated to use different packages provided by them. We do miss some of the current integrations though.

On a different project I do got the dev and prod server working, but I had to change quite some code. I'll test this through and see if this is really necessary or not.

@hakimLyon I did start from your PR, created a new one though.

[DennisKraaijeveld]

Some comments to be made:

• The Sentry package has changed from the Remix one to @sentry/react. This setup still needs some testing and see if we are still receiving the correct information. For example the captureRemixServerException has no real replacement. Client and server errors are both using Sentry.captureException Not sure how this will turn out.

• There is still a @remix-run/server-runtime dependency in some of the packages like remix-auth-* and the nasa-gcn/remix-seo package. Haven't looked into it but I had to install this dep in order to get everything working. This is causing one new typeerror within the sitemap route and I guess those packages need an upgrade so it works fine with RR7

@kentcdodds

[DennisKraaijeveld]

Looks like the gcn SEO package is not being actively maintained. We could switch to: https://www.npmjs.com/package/@forge42/seo-tools

[stephen776]

https://docs.sentry.io/platforms/javascript/guides/react-router/

Might be helpful for the Sentry stuff. I haven't tried myself yet though.

[DennisKraaijeveld]

@stephen776 Thanks! Looks like they updated the docs a bit. I'll check it out soon and see where we can update

[DennisKraaijeveld]

Looks like framework mode is not yet supported thus we have to wait until Sentry is supporting this

It does look like it can take a while (speaking about months) before a dedicated version is released: getsentry/sentry-javascript#14519

Following the React/Node integration from the link above will get you close enough for now.

[DennisKraaijeveld]

Saw that the httpIntegration and prismaIntegration are exported from the @sentry/node package so we can use these now. Looks like we are all set on the Sentry part. Whenever the dedicated RR package will be released we could move to that one.

[kentcdodds]

Amazing effort here! Thank you so much for doing this.

It's been a crazy few months, but I'm finally going to start getting back to work next week and I'll get to this (probably live on stream!!). I love seeing the green CI checks 💚

[hakimLyon]

Hi, Rather than defining SerializeFrom, it is possible to directly utilize the types from the .react-router folder as follows:

import { type Route, type Info } from './+types/profile.connections.ts
...

export async function loader({ request }: Route.LoaderArgs) {
...
export const headers: Route.HeadersFunction = ({ loaderHeaders }) => {
...

export async function action({ request }: Route.ActionArgs) {
...

export default function Connections({ loaderData }: Route.ComponentProps) {
...
function Connection({
	connection,
	canDelete,
}: {
	connection: Info['loaderData']['connections'][number]
	canDelete: boolean
}) {
...

';