clerk / javascript

Official JavaScript repository for Clerk authentication
https://clerk.com
MIT License
1.13k stars 251 forks source link

Routing failed. TypeError: Cannot read properties of undefined (reading 'pagePath' #3772

Open MisterJimson opened 3 months ago

MisterJimson commented 3 months ago

Preliminary Checks

Reproduction

don't have a reproduction

Publishable key

pk_live_Y2xlcmsud2l0aHRlcm1pbmFsLmNvbSQ

Description

Steps to reproduce:

  1. Setup NextJS & Clerk, similar to https://clerk.com/docs/quickstarts/nextjs
  2. Deploy to a hosted environment. (In my case, AWS, Lambda, and SST)
  3. Log in
  4. Log out

Expected behavior: You see your login page

Actual behavior:

The above error is thrown by the Clerk SDK, triggering the project's Error Boundary.

My middleware file is quite simple.

export default clerkMiddleware((auth, request) => {
  if (isProtectedRoute(request)) {
    auth().protect();
  }

  return NextResponse.next();
});

Environment

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 77.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/Library/Caches/fnm_multishells/9874_1721250512495/bin/node
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/9874_1721250512495/bin/npm
    pnpm: 9.4.0 - ~/Library/Caches/fnm_multishells/9874_1721250512495/bin/pnpm
    bun: 1.1.16 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @clerk/nextjs: ^5.0.12 => 5.2.3
    @heroicons/react: ^2.1.1 => 2.1.5
    @hookform/resolvers: ^3.4.2 => 3.9.0
    @knocklabs/client: 0.10.11 => 0.10.11
    @knocklabs/react: 0.2.25 => 0.2.25
    @radix-ui/react-accordion: ^1.1.2 => 1.2.0
    @radix-ui/react-alert-dialog: ^1.0.5 => 1.1.1
    @radix-ui/react-aspect-ratio: ^1.0.3 => 1.1.0
    @radix-ui/react-avatar: ^1.0.4 => 1.1.0
    @radix-ui/react-checkbox: ^1.1.1 => 1.1.1
    @radix-ui/react-collapsible: ^1.0.3 => 1.1.0
    @radix-ui/react-context-menu: ^2.1.5 => 2.2.1
    @radix-ui/react-dialog: ^1.0.5 => 1.1.1
    @radix-ui/react-dropdown-menu: ^2.0.6 => 2.1.1
    @radix-ui/react-hover-card: ^1.0.7 => 1.1.1
    @radix-ui/react-label: ^2.0.2 => 2.1.0
    @radix-ui/react-menubar: ^1.0.4 => 1.1.1
    @radix-ui/react-navigation-menu: ^1.1.4 => 1.2.0
    @radix-ui/react-popover: ^1.0.7 => 1.1.1
    @radix-ui/react-progress: ^1.0.3 => 1.1.0
    @radix-ui/react-radio-group: ^1.1.3 => 1.2.0
    @radix-ui/react-scroll-area: ^1.0.5 => 1.1.0
    @radix-ui/react-select: ^2.0.0 => 2.1.1
    @radix-ui/react-separator: ^1.0.3 => 1.1.0
    @radix-ui/react-slider: ^1.1.2 => 1.2.0
    @radix-ui/react-slot: ^1.0.2 => 1.1.0
    @radix-ui/react-switch: ^1.0.3 => 1.1.0
    @radix-ui/react-tabs: ^1.1.0 => 1.1.0
    @radix-ui/react-toast: ^1.1.5 => 1.2.1
    @radix-ui/react-toggle: ^1.0.3 => 1.1.0
    @radix-ui/react-toggle-group: ^1.0.4 => 1.1.0
    @radix-ui/react-tooltip: ^1.0.7 => 1.1.2
    @sentry/nextjs: ^7.114.0 => 7.118.0
    @spotlightjs/spotlight: ^2.0.0 => 2.0.0
    @tanstack/react-query: ^5.40.0 => 5.51.1
    @tanstack/react-table: 8.19.2 => 8.19.2
    @terminal/cdn: workspace:* => 0.0.0
    @terminal/config: workspace:* => 0.0.0
    @terminal/core: workspace:* => 0.0.0
    @terminal/generated: workspace:* => 0.0.0
    @terminal/schemas: workspace:* => 0.0.0
    @terminal/sdk: workspace:* => 0.0.0
    @terminal/spotlight-logger: workspace:* => 0.0.1
    @types/node: ^20 => 20.14.11
    @types/papaparse: ^5.3.14 => 5.3.14
    @types/react: ^18.3.3 => 18.3.3
    @types/react-dom: ^18.3.0 => 18.3.0
    autoprefixer: ^10.0.1 => 10.4.19
    axios: ^1.6.7 => 1.7.2
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.0.0 => 2.1.1
    cmdk: ^1.0.0 => 1.0.0
    date-fns: ^3.0.0 => 3.6.0
    embla-carousel-react: 8.1.6 => 8.1.6
    eslint: ^8 => 8.57.0
    eslint-config-next: 14.2.5 => 14.2.5
    google-maps-react-markers: ^2.0.10 => 2.0.10
    jotai: ^2.6.4 => 2.9.0
    lucide-react: ^0.407.0 => 0.407.0
    next: 14.2.5 => 14.2.5
    next-themes: ^0.3.0 => 0.3.0
    nuqs: ^1.17.4 => 1.17.4
    papaparse: ^5.4.1 => 5.4.1
    postcss: ^8 => 8.4.39
    posthog-js: ^1.131.3 => 1.146.1
    react: ^18.3.1 => 18.3.1
    react-day-picker: ^8.10.0 => 8.10.1
    react-dom: ^18.3.1 => 18.3.1
    react-error-boundary: ^4.0.12 => 4.0.13
    react-hook-form: ^7.51.5 => 7.52.1
    react-resizable-panels: ^2.0.5 => 2.0.20
    sonner: ^1.4.41 => 1.5.0
    svix-react: ^1.11.0 => 1.11.0
    tailwind-merge: ^2.2.1 => 2.4.0
    tailwindcss: ^3.3.0 => 3.4.4
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5.5.2 => 5.5.3
    vaul: ^0.9.0 => 0.9.1
    zod: ^3.23.8 => 3.23.8
LekoArts commented 3 months ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

clerk-cookie commented 3 months ago

Hello 👋

In an effort to keep our GitHub issues clean and focused, we close any issues that are awaiting a reproduction after 8 days on inactivity, and it has been 7 days. This issue will be closed tomorrow unless a reproduction is provided. If it takes longer than this to get a reproduction, that's ok, just drop a comment and we will remove the Stale label.

How to create a minimal reproduction

Thanks for being a part of the Clerk community! 🙏

thadhutch commented 3 months ago

I have this exact same setup and am running into this issue when I try to log in with a domain that hasn't been whitelisted. It also causes a Lambda timeout which breaks my application. I have to go to a different browser and sign in, and then sign out to create a temporary fix.

thadhutch commented 3 months ago

For context I'm authenticating like this:

await signIn.authenticateWithRedirect({
        strategy: "oauth_google",
        redirectUrl: "/sso-callback",
        redirectUrlComplete: "/manage-inspections",
})
MisterJimson commented 2 months ago

FYI https://github.com/clerk/javascript/pull/3773 did not resolve the issue, I was hoping it would as some of the error message stack is the same.

Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following: - clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware. - Your Middleware matcher is configured to match this route or page. - If you are using the src directory, make sure the Middleware file is inside of it. For more details, see https://clerk.com/docs/quickstarts/nextjs at /var/task/packages/dashboard/.next/server/chunks/91.js:76:33305 at /var/task/packages/dashboard/.next/server/chunks/91.js:100:5877 at v (/var/task/packages/dashboard/.next/server/chunks/91.js:76:33871) at eI (/var/task/packages/dashboard/.next/server/chunks/611.js:25:37770) at Object.c [as getAlternativeEnvironmentStates] (/var/task/packages/dashboard/.next/server/chunks/51.js:1:17150) at c (/var/task/packages/dashboard/.next/server/chunks/51.js:1:18807) at eh (/var/task/node_modules/.pnpm/next@14.2.5_@opentelemetry+api@1.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134786) at e (/var/task/node_modules/.pnpm/next@14.2.5_@opentelemetry+api@1.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137671) at ek (/var/task/node_modules/.pnpm/next@14.2.5_@opentelemetry+api@1.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138145) at Object.toJSON (/var/task/node_modules/.pnpm/next@14.2.5_@opentelemetry+api@1.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135755)
panteliselef commented 2 months ago

@MisterJimson @thadhutch Would you mind checking if this snapshot fixes your issue ?

npm i @clerk/nextjs@5.3.1-snapshot.v5a90f37 --save-exact
MisterJimson commented 2 months ago

@panteliselef that build does seem to fix the error, thank you.

As a side note, where I used to see this error, I now see a 404 due to https://github.com/clerk/javascript/issues/3864

panteliselef commented 2 months ago

Great, this will be shipped in the next minor/patch release.

About the 404, we will investigate. Please provide us with any additional info, that you think will help us reproduce, in #3864

thadhutch commented 2 months ago

Figured I'd circle back on this since it's still ongoing. For me, the issue was actually caused by how I configured my VPC. It was actually unrelated to Clerk, but I didn't reproduce once I fixed my configuration. I ended up just implementing auth with an open source library.

MisterJimson commented 2 months ago

This issue started happening again when I updated from the snapshot build to try to get the benefit of https://github.com/clerk/javascript/issues/3864 being solved.

On "@clerk/nextjs": "5.4.0"