K
Kinde•2mo ago
jamie

Upgrading from version 4 to version 5 of @kinde-oss/kinde-auth-react gives compiler error

I've just upgraded @kinde-oss/kinde-auth-react from version 4.0.4 to version 5.5.0 and I get presented with the following compiler error: 
ERROR in ./src/index.tsx 115:39-52
Can't import the named export 'KindeProvider' (imported as 'KindeProvider') from default-exporting module (only default export is available)
ERROR in ./src/index.tsx 115:39-52
Can't import the named export 'KindeProvider' (imported as 'KindeProvider') from default-exporting module (only default export is available)
After some googling it looks like the change may be related to CommonJS exports, but I'm pretty lost at this point. I'm importing KindeProvider like so: 
import { KindeProvider } from '@kinde-oss/kinde-auth-react';
import { KindeProvider } from '@kinde-oss/kinde-auth-react';
8 Replies
Abdelrahman Zaki - Kinde
Abdelrahman Zaki - Kinde•2mo ago
Hi @jamie, your import looks correct. Could you please share your package.json file?
jamie
jamieOP•2mo ago
Oh actually that's the current branch I'm on
jamie
jamieOP•2mo ago
jamie
jamieOP•2mo ago
That should be the correct one @Abdelrahman Zaki - Kinde I've noticed that in node_modules @kinde-oss/kinde-auth-react the package.json shows: 
{
  "name": "@kinde-oss/kinde-auth-react",
  "version": "5.6.0-2",
  "description": "Kinde React SDK for authentication",
  "module": "./dist/kinde-auth-react.mjs",
  "main": "./dist/kinde-auth-react.js",
  "types": "./dist/index.d.ts",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/src/index.d.ts",
      "import": "./dist/index.cjs",
      "require": "./dist/main.js"
    },
    "./components": {
      "types": "./dist/src/components/index.d.ts",
      "import": "./dist/components.cjs",
      "require": "./dist/components.js"
    },
    "./utils": {
      "types": "./dist/src/utils/index.d.ts",
      "import": "./dist/utils.cjs",
      "require": "./dist/utils.js"
    }
  },
  ...
{
  "name": "@kinde-oss/kinde-auth-react",
  "version": "5.6.0-2",
  "description": "Kinde React SDK for authentication",
  "module": "./dist/kinde-auth-react.mjs",
  "main": "./dist/kinde-auth-react.js",
  "types": "./dist/index.d.ts",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/src/index.d.ts",
      "import": "./dist/index.cjs",
      "require": "./dist/main.js"
    },
    "./components": {
      "types": "./dist/src/components/index.d.ts",
      "import": "./dist/components.cjs",
      "require": "./dist/components.js"
    },
    "./utils": {
      "types": "./dist/src/utils/index.d.ts",
      "import": "./dist/utils.cjs",
      "require": "./dist/utils.js"
    }
  },
  ...
But the files in dist/ look like: 
        dist
          src
           components.cjs
           components.d.ts
           components.mjs
           expoSecureStore-CGvg7wIF-C9YOw_MN.cjs
          󰌞 expoSecureStore-CGvg7wIF-DC3SQGHh.js
          󰌞 index-D7w89Tv5.js
           index-DVfetgQl.cjs
           index.cjs
           index.d.ts
           index.mjs
           js-utils-CDTLCo61.cjs
          󰌞 js-utils-CMYq8l3H.js
          󰌞 useKindeAuth-BArWbaqf.js
           useKindeAuth-BD1u4rmN.cjs
           utils.cjs
           utils.d.ts
           utils.mjs
        dist
          src
           components.cjs
           components.d.ts
           components.mjs
           expoSecureStore-CGvg7wIF-C9YOw_MN.cjs
          󰌞 expoSecureStore-CGvg7wIF-DC3SQGHh.js
          󰌞 index-D7w89Tv5.js
           index-DVfetgQl.cjs
           index.cjs
           index.d.ts
           index.mjs
           js-utils-CDTLCo61.cjs
          󰌞 js-utils-CMYq8l3H.js
          󰌞 useKindeAuth-BArWbaqf.js
           useKindeAuth-BD1u4rmN.cjs
           utils.cjs
           utils.d.ts
           utils.mjs
It seems ./dist/kinde-auth-react.mjs and ./dist/kinde-auth-react.js don't exist, and the .mjs files are not used. Also the .js files are missing
Abdelrahman Zaki - Kinde
Abdelrahman Zaki - Kinde•2mo ago
Hi @jamie, it looks like you're on version 5.6.0-2, which is a pre-release. Could you try switching to the latest stable version and see if it works? 
npm install @kinde-oss/[email protected]
npm install @kinde-oss/[email protected]
Let me know how it goes!
jamie
jamieOP•2mo ago
Hi @Abdelrahman Zaki - Kinde, yeah this was just from some experimental work I was doing to try and get things working. I found a fix in the end, but it doesn't seem to work with 5.5.0. My colleague has opened a PR request with the SDK in question here: https://github.com/kinde-oss/kinde-auth-react/pull/155 I suspect that this isn't sufficient since as I understand it, you're using bundling software to generate the package.json. Also, when I tried to implement a fix for 5.5.0, it didn't work so I had to stick with 5.6.0-2. Either way it is clear that the package.json is not correctly exporting. I have implemented a patch in our software to get things working with 5.6.0-2 using patch-package. In case it's helpful here's the patch file:
GitHub
fix(package-json): fix package.json exports to provide correct mjs/...
Explain your changes At present the imports and exports of the package are incorrectly mapped. This PR fixes them. (Context: if you clone the repo, install it and run vite build, you get a cjs and ...
jamie
jamieOP•2mo ago
patches/@kinde-oss+kinde-auth-react+5.6.0-2.patch 
diff --git a/node_modules/@kinde-oss/kinde-auth-react/package.json b/node_modules/@kinde-oss/kinde-auth-react/package.json
index bca0bb0..b23c9ea 100644
--- a/node_modules/@kinde-oss/kinde-auth-react/package.json
+++ b/node_modules/@kinde-oss/kinde-auth-react/package.json
@@ -2,25 +2,25 @@
   "name": "@kinde-oss/kinde-auth-react",
   "version": "5.6.0-2",
   "description": "Kinde React SDK for authentication",
-  "module": "./dist/kinde-auth-react.mjs",
-  "main": "./dist/kinde-auth-react.js",
+  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/src/index.d.ts",
-      "import": "./dist/index.cjs",
-      "require": "./dist/main.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./components": {
       "types": "./dist/src/components/index.d.ts",
-      "import": "./dist/components.cjs",
-      "require": "./dist/components.js"
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.cjs"
     },
     "./utils": {
       "types": "./dist/src/utils/index.d.ts",
-      "import": "./dist/utils.cjs",
-      "require": "./dist/utils.js"
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.cjs"
     }
   },
   "scripts": {
diff --git a/node_modules/@kinde-oss/kinde-auth-react/package.json b/node_modules/@kinde-oss/kinde-auth-react/package.json
index bca0bb0..b23c9ea 100644
--- a/node_modules/@kinde-oss/kinde-auth-react/package.json
+++ b/node_modules/@kinde-oss/kinde-auth-react/package.json
@@ -2,25 +2,25 @@
   "name": "@kinde-oss/kinde-auth-react",
   "version": "5.6.0-2",
   "description": "Kinde React SDK for authentication",
-  "module": "./dist/kinde-auth-react.mjs",
-  "main": "./dist/kinde-auth-react.js",
+  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/src/index.d.ts",
-      "import": "./dist/index.cjs",
-      "require": "./dist/main.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./components": {
       "types": "./dist/src/components/index.d.ts",
-      "import": "./dist/components.cjs",
-      "require": "./dist/components.js"
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.cjs"
     },
     "./utils": {
       "types": "./dist/src/utils/index.d.ts",
-      "import": "./dist/utils.cjs",
-      "require": "./dist/utils.js"
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.cjs"
     }
   },
   "scripts": {
To clarify, a base install of 5.5.0 also didn't help
Abdelrahman Zaki - Kinde
Abdelrahman Zaki - Kinde•2mo ago
Hi @jamie, just letting you know the PR has been merged, thanks a lot for your help and detailed investigation! Really appreciate you taking the time to patch and share your findings. Let us know if you run into anything else!

Did you find this page helpful?