Vue 3 + Vite + TypeScript error when importing OktaVue and OktaAuth

[LBLucaBonetti]

Describe the bug?

Given a fresh new Vue3 + Vite + TypeScript app, installing and importing OktaVue and OktaAuth following the docs does not work and gives an error in the console; the app does not render correctly.

What is expected to happen?

The app should correctly load the imports and render.

What is the actual behavior?

The app does not render and the described error gets written to the console.

Reproduction Steps?

The reproduction repo is located here. The commit reference you have to go to is the a241630c9b1968b91833bc35bbcef9a7a2472e26. You can clone the repo, npm install and npm run dev. Open the link that Vite shows when it's started (localhost:3000 on my machine) and open up the console of your browser. You should not see the app rendering and an error pops up in the console. Here's the error I see using my current browser Firefox ESR 91.7.0esr (64-bit):

Uncaught TypeError: class heritage EventEmitter is not an object or null @ NodeCache2 node_cache.js:22.

The same error pops up if I try okta-auth-js instead of okta-vue and on different browsers (I also tested Google Chrome Version 100.0.4896.60 (Official Build) (64-bit)).

I tried the aliasing provided in this (commit reference 2f671376f685cc53ec3daa994cdd1b94cbfde0cf) guide but I get another error when running the app that says the okta-auth-js.umd.js file is not exported by the package.json file of okta-auth-js.

SDK Versions

The version of okta-vue I tested is 5.2.1, as you can see from the package.json file that shows every package with its version.

Execution Environment

SO: Debian GNU/Linux 11 (bullseye) with GNOME 3.38.5 Browsers: Firefox ESR 91.7.0esr (64-bit) and Google Chrome Version 100.0.4896.60 (Official Build) (64-bit) NodeJS: 16.14.2 npm: 8.5.0

Additional Information?

No response

[shuowu]

@LBLucaBonetti Seems like you are missing @okta/okta-auth-js in your dependencies list.

[LBLucaBonetti]

@shuowu that was my bad, I missed adding it when I prepared the repo. I have the same behavior. You can check out the commit 509ce27a2314bd7df1053316574416a14abcc60a.

[OwenVey]

+1 Also see thing same issue. This issue was not happening when using:

"@okta/okta-auth-js": "6.2.0",
"@okta/okta-vue": "5.2.0",

Upgrading to

"@okta/okta-auth-js": "6.3.1",
"@okta/okta-vue": "5.2.1",

however had resulted in the following error when starting up my app: node_cache.js:22 Uncaught TypeError: Class extends value undefined is not a constructor or null

Full stack trace shown below:

I am using Vite 2.9.1

[shuowu]

Internal Ref: OKTA-486501

[shuowu]

Patch released in @okta/okta-auth-js v6.3.2.