search

kinde-oss / kinde-auth-nextjs

Kinde NextJS SDK - authentication for server rendered apps
https://docs.kinde.com/developer-tools/sdks/backend/nextjs-sdk/
MIT License
155 stars 23 forks source link

Bug: TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function #168

Closed volkgames closed 2 months ago

volkgames commented 5 months ago

Prerequisites

Describe the issue

Hi, I just tried to get server session for isAuthenticated method for switch for two buttons display but this happen only here


import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export const Navs = async () => {
  const { isAuthenticated } = getKindeServerSession();

  const logged = await isAuthenticated();

  return (
    <nav className="flex gap-4">
      {logged ? (
        <div className="flex w-fit items-center gap-4">
          <Button variant={"link"} asChild>
            <Link href={"/dashboard"}>Dashboard</Link>
          </Button>
          <AccountMenu />
        </div>
      ) : (
        <div className="flex items-center gap-4">
          <Button variant={"link"} asChild>
            <LoginLink>SignIn</LoginLink>
          </Button>
          <Button variant={"link"} asChild>
            <RegisterLink>SignUp</RegisterLink>
          </Button>
        </div>
      )}
      <ModeToggle />
    </nav>
  );
};

export default Navs;

console:

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/@kinde-oss/kinde-auth-nextjs/dist/index.js:16:11560)
    at (rsc)/./node_modules/@kinde-oss/kinde-auth-nextjs/dist/index.js (D:\Big Projects\minecraft-client\.next\server\vendor-chunks\@kinde-oss.js:30:1)
    at __webpack_require__ (D:\Big Projects\minecraft-client\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./app/(main)/_components/nav.tsx:9:86)
    at (rsc)/./app/(main)/_components/nav.tsx (D:\Big Projects\minecraft-client\.next\server\app\(main)\(routes)\dashboard\server\[id]\(routes)\main\page.js:563:1)
    at __webpack_require__ (D:\Big Projects\minecraft-client\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./app/(main)/_components/header.tsx:7:62)
    at (rsc)/./app/(main)/_components/header.tsx (D:\Big Projects\minecraft-client\.next\server\app\(main)\(routes)\dashboard\server\[id]\(routes)\main\page.js:552:1)
    at __webpack_require__ (D:\Big Projects\minecraft-client\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./app/(main)/layout.tsx:7:76) {
  type: 'TypeError',
  page: '/dashboard/server/MfQxfjWwo7RrBrnLeO4o/main'
}

Library URL

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

Library version

2.2.6

Operating system(s)

Windows

Operating system version(s)

Windows 11 version 22H2

Further environment details

package.json

{
  "name": "minecraft-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@kinde-oss/kinde-auth-nextjs": "^2.2.6",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@typeschema/zod": "^0.13.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "drizzle-orm": "^0.30.10",
    "firebase": "^10.11.1",
    "framer-motion": "^11.1.9",
    "ldrs": "^1.0.1",
    "lucide-react": "^0.378.0",
    "mineflayer": "^4.20.1",
    "net": "^1.0.2",
    "next": "14.2.3",
    "next-safe-action": "^6.2.0",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.4",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.23.6"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "supabase": "^1.165.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Reproducible test case URL

No response

Additional information

No response

leomollmann commented 5 months ago

I have the same issue, the way I fixed was by making a client component for just the LoginLink and RegisterLink, it seems like they break when you use directly in server side. The other solution is to use a regular Next.js Link to api/auth/login.

peterphanouvong commented 2 months ago

For the LoginLink and RegisterLink components, it's best to import them from @kinde-oss/kinde-auth-nextjs/components to avoid this error. We left them in @kinde-oss/kinde-auth-nextjs and @kinde-oss/kinde-auth-nextjs/server for backwards compatibility.