Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot find module 'atob' #768

Closed
Clee681 opened this issue May 27, 2021 · 25 comments
Closed

Cannot find module 'atob' #768

Clee681 opened this issue May 27, 2021 · 25 comments

Comments

@Clee681
Copy link

Clee681 commented May 27, 2021

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

@Clee681 Thanks for posting!

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

cc: @aarongranick-okta @shuowu-okta

@hirako2000
Copy link

hirako2000 commented Jun 3, 2021

I confirm the issue when importing 5.0.2.

Here is a PR to fix this: #786

@shuowu-okta
Copy link
Contributor

@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
Copy link

@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
Copy link
Contributor

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

@shuowu-okta
Copy link
Contributor

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

@Clee681
Copy link
Author

Clee681 commented Jun 8, 2021

Thanks @shuowu-okta!!

@shuowu
Copy link
Contributor

shuowu commented Jun 8, 2021

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

@Clee681
Copy link
Author

Clee681 commented Jun 8, 2021

@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
Copy link
Contributor

shuowu commented Jun 8, 2021

@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
Copy link
Author

Clee681 commented Jun 8, 2021

@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 sveltejs/kit#1570.

@Clee681
Copy link
Author

Clee681 commented Jun 9, 2021

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

@Clee681
Copy link
Author

Clee681 commented Jun 9, 2021

@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.

PeculiarVentures/webcrypto#31

@shuowu
Copy link
Contributor

shuowu commented Jun 9, 2021

@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
Copy link
Author

Clee681 commented Jun 9, 2021

@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
Copy link
Contributor

shuowu commented Jun 9, 2021

@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
Copy link
Author

Clee681 commented Jun 9, 2021

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
Copy link
Author

Clee681 commented Jun 10, 2021

@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.

vitejs/vite#3736 (comment)

@shuowu
Copy link
Contributor

shuowu commented Jun 10, 2021

@Clee681 Instead of fighting against vite, maybe you can try use the commonJS bundle on the server side, then use the CDN artifact (add <script> tag in your html) for browser side usage. See details here. You can also include the sourcemap for debugging if needed.

I am not very familiar with vite, but based on the reading yesterday, looks like vite tries to transform cjs to esm, I think that might be the place where issues happen.

@Clee681
Copy link
Author

Clee681 commented Jun 10, 2021

Interesting, thank you. I'll try that to at least unblock my current work. Will still keep up with the vite thread since I think other people will eventually hit the same error.

@shuowu shuowu closed this as completed Jun 14, 2021
@shuowu
Copy link
Contributor

shuowu commented Jun 14, 2021

@Clee681 Close this issue as it appears to be an issue in vite. Feel free to reopen it if you have any further questions.

@hirako2000
Copy link

hirako2000 commented Jun 15, 2021

Please reopen.

It is not an issue with vite. I reproduced the issue with zero frameworks. Just importing okta-auth-js causes the problem.

Also to note, this issue is specifically for the atob dependency being missing. While I appreciate there are problems with dependencies as well, and that the internal team would like to fix them all, those are of different nature and would better be patched separately.

A PR was created to patch this issue specifically but it has now be ignored in favour of fixing the problem as part of another code merge. It is not an easy to track process and in a way contradicts the nature of allowing the community at wide to offer pull request.

I hope you understand my concern, which now goes beyond the fact a release of this library totally broke any dependent project using it.

I suggest reverting the fix done elsewhere. Merge this PR to be able to test a reproducible passing suite of the atob import

You actually have a nice CI integration, and some unit tests in place. I'm willing to review the unit tests and add the necessary cases to strengthen the validation so that if an issue with dependencies occur in the future, you CI catches it.

Edit: The patch works. don't revert anything.

@hirako2000
Copy link

hirako2000 commented Jun 15, 2021

@Clee681, while @shuowu's suggestion may work around your problen, vite is designed to handle dependencies to provide many of its benefit. If vite has an issue with building certain assets, file an issue with vite and mention it in this thread so that others who are affected can make sense of that's going on. (which you did) The vite team is very active and will promptly provide feedback if indeed vite is at faullt :)

@hirako2000
Copy link

hirako2000 commented Jun 15, 2021

I've tested 5.1.1 and the atom dependencies is imported fine. Thanks for fixing it.

The other issues are another problem impacting certain configuration of Vite or the way the deps are imported.

My comment about the release and merging process still applies though. I do hope it is taken in consideration for future handling so that users who track issues don't have to second guess and jump on other related issues to make sense of the fix.

package.json:

{
  "name": "test-okta",
  "version": "1.0.0",
  "description": "just a test of loading okta-auth-js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hirako2000",
  "license": "MIT",
  "dependencies": {
    "@okta/okta-auth-js": "^5.1.1"
  }
}

index.js:

require('@okta/okta-auth-js');

console.log('loading okta-auth-js OK');

Execution:

$ node index.js # node v14.x
> loading okta-auth-js OK

While when reproducing the same with v5.0.2, the load was failing:

$ node index.js 
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'atob'
Require stack:
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/node.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/webcrypto.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/base64.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/index.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/oidc/util/pkce.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/OktaAuth.js
- ../test-okta/node_modules/@okta/okta-auth-js/cjs/index.js
- ../test-okta/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> (../test-okta/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) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/node.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/webcrypto.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/base64.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/crypto/index.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/oidc/util/pkce.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/OktaAuth.js',
    '../test-okta/node_modules/@okta/okta-auth-js/cjs/index.js',
    '../test-okta/index.js'
  ]
}

So the patch works. thanks.

Note how a simple test run by CI would catch dependencies run time issues going forward.

@shuowu
Copy link
Contributor

shuowu commented Jun 16, 2021

@hirako2000 Thanks for all the suggestion about how to improve the CI! We are actually also exploring approachs to protect against issues like this and it's tracked with an internal Jira.

To be more specific, we currently do run a test harness app which loads the latest okta-auth-js package in CI, but due to the nature of yarn workspace, the dependencies from the root level leak to the test harness app, that's why we missed this issue during release. We are exploring approaches like nohoist or containerize the harness app, so it can free from deps leaking issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants