search

okta / okta-auth-js

The official js wrapper around Okta's auth API
Other
447 stars 260 forks source link

Cannot find module 'atob' #768

Closed Clee681 closed 3 years ago

Clee681 commented 3 years ago

Hello,

When importing OktaAuth from 5.0.2 using node v14.15.0, I get the following module error.

10:37:48 PM [vite] Error when evaluating SSR module /web/src/routes/api/login.ts:
Error: Cannot find module 'atob'
Require stack:
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/node.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/webcrypto.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/base64.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/index.js
- /web/node_modules/@okta/okta-auth-js/cjs/oidc/util/pkce.js
- /web/node_modules/@okta/okta-auth-js/cjs/OktaAuth.js
- /web/node_modules/@okta/okta-auth-js/cjs/index.js
- /web/node_modules/vite/dist/node/chunks/dep-e9a16784.js
- /web/node_modules/vite/dist/node/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/web/node_modules/@okta/okta-auth-js/cjs/crypto/node.js:14:22)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
Cannot find module 'atob'
Require stack:
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/node.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/webcrypto.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/base64.js
- /web/node_modules/@okta/okta-auth-js/cjs/crypto/index.js
- /web/node_modules/@okta/okta-auth-js/cjs/oidc/util/pkce.js
- /web/node_modules/@okta/okta-auth-js/cjs/OktaAuth.js
- /web/node_modules/@okta/okta-auth-js/cjs/index.js
- /web/node_modules/vite/dist/node/chunks/dep-e9a16784.js
- /web/node_modules/vite/dist/node/index.js

Edit: Confirmed that this is not an issue in 4.9.2

arvindkrishnakumar-okta commented 3 years ago

@Clee681 Thanks for posting!

I will ask our SDK engineers to take a look and comment.

cc: @aarongranick-okta @shuowu-okta

hirako2000 commented 3 years ago

I confirm the issue when importing 5.0.2.

Here is a PR to fix this: #786

shuowu-okta commented 3 years ago

@Clee681 Thanks for reporting the issue, we will release a patch for it and get you updated in this thread.

@hirako2000 Thanks for your contribution! As there still are some other missing modules in dependencies, I'll take this issue over and do more test on it.

Internal Ref: OKTA-402553

jchabotamica commented 3 years ago

@shuowu-okta we are getting a similar issue: Cannot find module '@peculiar/webcrypto' from 'node_modules/@okta/okta-auth-js/cjs/crypto/node.js'

Will this be included in the patch?

shuowu-okta commented 3 years ago

@jchabotamica Yep, you can check #805 for details.

shuowu-okta commented 3 years ago

One workaround before the patch release is to manually add modules atob, btoa and @peculiar/webcrypto to your app.

Clee681 commented 3 years ago

Thanks @shuowu-okta!!

shuowu commented 3 years ago

Patches released. You can find 5.1.1 and 5.0.3 on npm.

Clee681 commented 3 years ago

@shuowu-okta I'm seeing the below error on fresh install

3:36:13 PM [vite] new dependencies found: @okta/okta-auth-js, updating...
 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:17: error: No matching export in "browser-external:crypto" for import "createCipheriv"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                  ~~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:33: error: No matching export in "browser-external:crypto" for import "publicEncrypt"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                  ~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:48: error: No matching export in "browser-external:crypto" for import "privateDecrypt"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                                 ~~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:64: error: No matching export in "browser-external:crypto" for import "constants"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                                                 ~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:8:9: error: No matching export in "browser-external:process" for import "version"
    8 │ import { version } from 'process';
      ╵          ~~~~~~~

3:36:13 PM [vite] error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:17: error: No matching export in "browser-external:crypto" for import "createCipheriv"
node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:33: error: No matching export in "browser-external:crypto" for import "publicEncrypt"
node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:48: error: No matching export in "browser-external:crypto" for import "privateDecrypt"
node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:64: error: No matching export in "browser-external:crypto" for import "constants"
node_modules/@peculiar/webcrypto/build/webcrypto.es.js:8:9: error: No matching export in "browser-external:process" for import "version"
    at failureErrorWithLog (/Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:1446:15)
    at /Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:1128:28
    at runOnEndCallbacks (/Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:918:63)
    at buildResponseToResult (/Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:1126:7)
    at /Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:1233:14
    at /Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/Users/clee/Development/code/mlbam/vfx/web/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:365:28)
    at Socket.emit (node:domain:470:12)
shuowu commented 3 years ago

@Clee681 Which version of okta-auth-js are you using? Also, looks like you are using the CommonJS bundle(cjs), are you working on a server side app?

Clee681 commented 3 years ago

@shuowu-okta I'm using v5.1.1 in SvelteKit (which does do Server Side Rendering). I think I identified the bug being a Vite issue based on this https://github.com/sveltejs/kit/issues/1570.

Clee681 commented 3 years ago

@shuowu-okta Any ideas if this is an esm vs. cjs issue in okta-auth-js?

Clee681 commented 3 years ago

@shuowu-okta I was able to track my issue down to the @peculiar/webcrypto dependency. I filed an issue with their project, but it seems like the library does not work in the browser (i.e. it depends on node objects crypto and process). Hopefully, I get a response from the team. I think this will be an issue for anyone attempting to use okta-auth-js in SSR setups w/ Vite.

https://github.com/PeculiarVentures/webcrypto/issues/31

shuowu commented 3 years ago

@Clee681 This module is used as a fallback for node env, browser side depends on the Web_Crypto_API.

So your app is doing server side rendering, and the bundler picked the cjs bundle of okta-auth-js, then in which step you see the error above?

Clee681 commented 3 years ago

@shuowu-okta Gotcha. I created a quick bare bones reproduction here https://github.com/Clee681/okta-esm-module-repro.

Steps to view the error:

npm i
npm run dev
# you should see the errors in the terminal

I only added one line to the base template which was the below:

https://github.com/Clee681/okta-esm-module-repro/blob/0db73163d82248c9e6b2a77c2ae569fac11b7859/src/App.svelte#L4

I appreciate you responding so quickly!

shuowu commented 3 years ago

@Clee681 I think this issue happens when vite starts doing deps optimization. You probably can add some custom config there to bypass the @peculiar/webcrypto. If you app is just a SPA and runs in modern browsers, then this module won't be needed. https://vitejs.dev/config/#dep-optimization-options

Also another work can be using the okta-auth-js artifact from Okta global CDN ( v5.1.1 ) to avoid the bundler issue.

Clee681 commented 3 years ago

Thanks for looking into it. I'll try bypassing any optimization via the Vite config options to see if that fixes the issue in the repro project.

On first thought, I'm wondering if that solution will work for my SvelteKit app though. Based on my current implementation, I use OktaAuth both on the client and server side. For example, the backend uses OktaAuth.signIn and the frontend uses OktaAuth.tokenManager.

Clee681 commented 3 years ago

@shuowu-okta I think I finally identified the issue. Vite doesn't seem to like how okta-auth-js switches between the node and browser dependencies (i.e. using webpack to switch between node and browser files).

I have a thread in their repository so will report back what they say. I suspect this will be a bigger issue as Vite is gaining a lot of traction in the React, Vue, and Svelte worlds.

https://github.com/vitejs/vite/issues/3736#issuecomment-858648751

shuowu commented 3 years ago

@Clee681 Instead of fighting against vite, maybe you can try use the commonJS bundle on the server side, then use the CDN artifact (add Githubissues.

  • Githubissues is a development platform for aggregating issues.