Support Next.js 15 w/ React 19

defrex commented 2 weeks ago

Prerequisites

[X] I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
[X] I have checked the latest version of the library to replicate my issue
[X] I have read the contributing guidelines
[X] I agree to the terms within the code of conduct

Describe the issue

Next.js 15 is released, and ships with React 19 RC.

Currently, Kinde is our only blocker to upgrading.

This line

import { isTokenValid } from '@kinde-oss/kinde-auth-nextjs'

gives this error

TypeError: (0 , {imported module [project]/apps/op/nodemodules/next/dist/compiled/react/react.react-server.js [middleware] (ecmascript)}.createContext) is not a function

Here is the full traceback for reference

TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$apps$2f$op$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$react$2e$react$2d$server$2e$js__$5b$middleware$5d$__$28$ecmascript$29$__.createContext) is not a function
    at [project]/node_modules/@kinde-oss/kinde-auth-nextjs/dist/index.js [middleware] (ecmascript) (project/.next/server/edge/chunks/[project]__af6ad8._.js:7426:217)
    at <unknown> (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:693:27)
    at runModuleExecutionHooks (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:738:9)
    at instantiateModule (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:691:9)
    at getOrInstantiateModuleFromParent (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:624:12)
    at esmImport (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:142:20)
    at [project]/apps/op/src/middleware.ts [middleware] (ecmascript) (project/.next/server/edge/chunks/[root of the server]__98ade0._.js:229:178)
    at <unknown> (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:693:27)
    at runModuleExecutionHooks (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:738:9)
    at instantiateModule (project/.next/server/edge/chunks/edge-wrapper_35cfed.js:691:9)

Library URL

https://github.com/kinde-oss/kinde-auth-react

Library version

2.4.4

Operating system(s)

macOS

Operating system version(s)

13.1 (22C65)

Further environment details

No response

Reproducible test case URL

No response

Additional information

No response

DanielRivers commented 2 weeks ago

Hi @defrex, could you provide a reproduction repo? We have Kinde running on Next15 without issues.

defrex commented 2 weeks ago

Sure thing.

https://github.com/defrex/kinde-next-15

This repo is very simple.

npx create-next-app@latest
npm install @kinde-oss/kinde-auth-nextjs@latest --force

Note that --force is needed since the package's dependancies don't resolve naturally.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: kinde-next-15@0.1.0
npm error Found: react@19.0.0-rc-02c0e824-20241028
npm error node_modules/react
npm error   react@"19.0.0-rc-02c0e824-20241028" from the root project
npm error   peer react@"^18.2.0 || 19.0.0-rc-02c0e824-20241028" from next@15.0.2
npm error   node_modules/next
npm error     next@"15.0.2" from the root project
npm error     peer next@"^12.2.5 || ^13 || ^14 || ^15" from @kinde-oss/kinde-auth-nextjs@2.4.4
npm error     node_modules/@kinde-oss/kinde-auth-nextjs
npm error       @kinde-oss/kinde-auth-nextjs@"2.4.4" from the root project
npm error   1 more (react-dom)
npm error
npm error Could not resolve dependency:
npm error peer react@"^18 || ^19" from @kinde-oss/kinde-auth-nextjs@2.4.4
npm error node_modules/@kinde-oss/kinde-auth-nextjs
npm error   @kinde-oss/kinde-auth-nextjs@"2.4.4" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/highfiemployee/.npm/_logs/2024-11-04T22_02_10_584Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/highfiemployee/.npm/_logs/2024-11-04T22_02_10_584Z-debug-0.log

From there I just added this one line to the default page.tsx file.

import * as kinde from "@kinde-oss/kinde-auth-nextjs";

And I get the error reported above.

DanielRivers commented 2 weeks ago

Hey @defrex

I have checked into this and because we mix as part of the root export both server and client side methods. When using use client at the top of the example this resolved the issue.

You can update the import to be import * as kinde from "@kinde-oss/kinde-auth-nextjs/server and this will also work without the use client

The server export does not have a isTokenValid method, I would advise to use our dedicated validation package @kinde/jwt-validator which is more feature rich with better TS support.

Let me know how you get on and if you have any further questions.

defrex commented 2 weeks ago

Hm, alright, I'll give it a try. In my actual case I'm using it from a middleware, so likely the server (or jwt) packages are more appropriate anyway.

That said, this seems like an issue others may encounter.

defrex commented 2 weeks ago

I was able to fix my problem by converting the middleware to use withAuth. We'd previously needed a custom implementation for somewhat complex reasons, but I determined that wasn't needed anymore and the documented solution seems to work fine with Next.js 15.

Thanks for the help!

kinde-oss / kinde-auth-nextjs