Hi everyone,

I'm building a web app using React Router v7 as the SSR framework, and deploying it to Vercel. Basically, the web app uses the Reddit API and in order to fetch some public subreddits, I need to include an access token to avoid an unauthorized response.

What I want to achieve is for every request, check if an access token is available as a cookie and if not, request a new Reddit access token, and include it in the request as a cookie. So this way, I will preserve the access token through each request.

However, when I deploy it to Vercel, in the branch preview I get:
500: INTERNAL_SERVER_ERROR
Code: MIDDLEWARE_INVOCATION_FAILED

And in the Vercel preview console, it logs:
[ReferenceError: __dirname is not defined]

These are my current files:
package.json

//...
"dependencies": {
    "@emotion/is-prop-valid": "^1.3.1",
    "@heroui/react": "^2.8.0-beta.15",
    "@heroui/theme": "^2.4.20",
    "@react-router/dev": "^7.8.0",
    "@react-router/node": "^7.8.0",
    "@react-router/serve": "^7.8.0",
    "@tailwindcss/vite": "^4.1.11",
    "@vercel/analytics": "^1.5.0",
    "@vercel/react-router": "^1.2.2",
    "dotenv": "^16.6.1",
    "framer-motion": "^12.23.12",
    "isbot": "^5.1.29",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.4",
    "next": "^15.4.6",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-router": "^7.8.0",
    "sort-by": "^0.0.2",
    "tailwindcss": "^4.1.11",
    "uuid": "^10.0.0",
    "vite-tsconfig-paths": "^5.1.4"
  }
//...

vite.config.ts

export default defineConfig({
  plugins: [
    reactRouter(),
    tailwindcss(),
    tsconfigPaths(),
  ],
});

tsconfig.json

{
  "include": [
    "**/*",
    "**/.server/**/*",
    "**/.client/**/*",
    ".react-router/types/**/*"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["node", "vite/client"],
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "rootDirs": [".", "./.react-router/types"],
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  }
}

react-router.config.ts

export default {
  ssr: true,
  presets: [vercelPreset()],
} satisfies Config;

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  console.log("Middleware is running! Success!");
  return NextResponse.next();
}

export const config = {
  matcher: ['/'],
};

The file system convention is:

/app
/routes
index.tsx
/ui
app.css
root.tsx
routes.ts
utils.ts
/public
middleware.ts
package.json
react-router.config.ts
tsconfig.json
vite.config.json

This is my GitHub repository on branch 2.0.0: https://github.com/JossySola/century/tree/2.0.0

I appreciate any help, thank you so much for your time!