Kinde•11mo ago

Import error with Kinde TypeScript SDK in Next.js 14 project using PNPM

Hello everyone, I've recently integrated the Kinde auth solution into my Next.js 14 project, utilizing the app directory structure. However, I'm encountering an import error that's proving to be quite a hurdle. The issue arises when I attempt to use the RegisterLink or LoginLink components from the Kinde TypeScript SDK, or when navigating to the login API endpoint directly via http://localhost:3000/api/auth/login?post_login_redirect_url=%2Fdashboard. The error message is as follows:

../../node_modules/.pnpm/@[email protected]/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/code-challenge.js
Attempted import error: 'subtle' is not exported from 'uncrypto' (imported as 'subtle').

../../node_modules/.pnpm/@[email protected]/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/code-challenge.js
Attempted import error: 'subtle' is not exported from 'uncrypto' (imported as 'subtle').

This leads me to suspect there might be a dependency issue, especially since I'm using PNPM as my package manager. Has anyone else encountered this problem, or does anyone have insights on how to resolve this import error? Any guidance or suggestions would be greatly appreciated. Thank you in advance for your help!

5 Replies

onderay•11mo ago

Hi @Paul Cailly , It seems like you're trying to use the LoginLink and RegisterLink components from the Kinde TypeScript SDK in a Next.js project. However, these components are actually part of the Kinde Next.js SDK, not the TypeScript SDK. You should import them like this: import {LoginLink, RegisterLink} from "@Kinde-oss/kinde-auth-nextjs/components"; Then you can use them in your components: <LoginLink>Sign in</LoginLink> <RegisterLink>Sign up</RegisterLink> Regarding the error message you're seeing, it's possible that there's a compatibility issue with PNPM. Kinde's SDKs are tested with NPM and Yarn, so if you continue to see errors, you might want to try switching to one of those package managers. I hope this helps! Let me know if you have any other questions.

jyceNOP•11mo ago

I'm importing them from the right package:

import {
  RegisterLink,
  LoginLink,
} from "@kinde-oss/kinde-auth-nextjs/components";

import {
  RegisterLink,
  LoginLink,
} from "@kinde-oss/kinde-auth-nextjs/components";

I do replicate the issue server side with this code snippet:

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

export const GET = handleAuth();

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

export const GET = handleAuth();

switching to another package manager is not really a viable option for us as the project is part of a monorepo where we use PNPM

onderay•11mo ago

We haven't tried pnpm with the packages before, you can try configuring pnpm to work like npm, e.g. using node-linker=hoisted. Let us know how you go

jyceNOP•11mo ago

@Andre @ Kinde Added a .npmrc file with:

node-linker=hoisted

node-linker=hoisted

removed node_modules folder and pnpm install again but I still have the same error @quacksire this is our package.json:

{
  "name": "workforce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@faker-js/faker": "8.0.2",
    "@hookform/resolvers": "^3.3.1",
    "@kinde-oss/kinde-auth-nextjs": "^2.1.5",
    "@memoizcorp/decorators": "workspace:*",
    "@memoizcorp/errors": "workspace:*",
    "@memoizcorp/hooks": "workspace:*",
    "@memoizcorp/logger": "workspace:*",
    "@memoizcorp/tailwind": "workspace:*",
    "@memoizcorp/ui": "workspace:*",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@tanstack/react-table": "^8.11.7",
    "date-fns": "2.30.0",
    "next": "14.0.4",
    "nextjs-cors": "^2.2.0",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "react-hook-form": "^7.46.1",
    "recharts": "^2.10.4",
    "vitest": "0.34.1",
    "zod": "3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "dotenv": "16.3.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "raw-loader": "^4.0.2",
    "tailwindcss": "^3.3.0",
    "typescript": "^5",
    "unplugin-swc": "1.3.2"
  }
}

{
  "name": "workforce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@faker-js/faker": "8.0.2",
    "@hookform/resolvers": "^3.3.1",
    "@kinde-oss/kinde-auth-nextjs": "^2.1.5",
    "@memoizcorp/decorators": "workspace:*",
    "@memoizcorp/errors": "workspace:*",
    "@memoizcorp/hooks": "workspace:*",
    "@memoizcorp/logger": "workspace:*",
    "@memoizcorp/tailwind": "workspace:*",
    "@memoizcorp/ui": "workspace:*",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@tanstack/react-table": "^8.11.7",
    "date-fns": "2.30.0",
    "next": "14.0.4",
    "nextjs-cors": "^2.2.0",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "react-hook-form": "^7.46.1",
    "recharts": "^2.10.4",
    "vitest": "0.34.1",
    "zod": "3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "dotenv": "16.3.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "raw-loader": "^4.0.2",
    "tailwindcss": "^3.3.0",
    "typescript": "^5",
    "unplugin-swc": "1.3.2"
  }
}

we only use the nextjs package from @kinde-oss

onderay•11mo ago

Saw this online: https://github.com/pnpm/pnpm/issues/4997#issuecomment-1225486902 Able to give it a go?

GitHub

ENOENT: no such file or directory, copyfile · Issue #4997 · pnpm/pn...

Also having this issue after upgrading to v7. I have no idea how to reproduce it though... it works again by nuking the whole store and re-downloading everything. ENOENT ENOENT: no such file or dir...

Gaming

Programming

Import error with Kinde TypeScript SDK in Next.js 14 project using PNPM