[BUG]: octokit doesn't imported correctly on an React App, with VITE

[Mahmoudgalalz]

What happened?

I'm trying to get access token for a Github app, in browser

Versions

Latest, Browser

Relevant log output

chunk-3TEUGPMP.js?v=b1c3655e:9 Module "stream" has been externalized for browser compatibility. Cannot access "stream.Readable" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
get @ browser-external:stream:9
node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.mjs @ index.mjs:11
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+request@6.2.5/node_modules/@octokit/request/dist-web/index.js @ index.js:10
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+core@4.2.1/node_modules/@octokit/core/dist-web/index.js @ index.js:4
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
(anonymous) @ index.js:2
chunk-3TEUGPMP.js?v=b1c3655e:9 Module "stream" has been externalized for browser compatibility. Cannot access "stream.PassThrough" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
get @ browser-external:stream:9
node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.mjs @ index.mjs:163
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+request@6.2.5/node_modules/@octokit/request/dist-web/index.js @ index.js:10
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+core@4.2.1/node_modules/@octokit/core/dist-web/index.js @ index.js:4
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
(anonymous) @ index.js:2
index.mjs:657 Uncaught ReferenceError: global is not defined
    at node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.mjs (index.mjs:657:16)
    at __init (chunk-3TEUGPMP.js?v=b1c3655e:9:56)
    at node_modules/.pnpm/@octokit+request@6.2.5/node_modules/@octokit/request/dist-web/index.js (index.js:10:1)
    at __init (chunk-3TEUGPMP.js?v=b1c3655e:9:56)
    at node_modules/.pnpm/@octokit+core@4.2.1/node_modules/@octokit/core/dist-web/index.js (index.js:4:1)
    at __init (chunk-3TEUGPMP.js?v=b1c3655e:9:56)
    at index.js:2:1
node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.mjs @ index.mjs:657
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+request@6.2.5/node_modules/@octokit/request/dist-web/index.js @ index.js:10
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
node_modules/.pnpm/@octokit+core@4.2.1/node_modules/@octokit/core/dist-web/index.js @ index.js:4
__init @ chunk-3TEUGPMP.js?v=b1c3655e:9
(anonymous) @ index.js:2
Show 1 more frame

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[wolfy1339]

Please see https://github.com/octokit/octokit.js/issues/2126 and https://github.com/octokit/core.js/issues/547

This is a known issue, hopefully removing node-fetch will help, https://github.com/octokit/request.js/pull/586

[wolfy1339]

For the mean time, switch your imports of Octokit to use esm.sh:

import { Octokit } from "https://esm.sh/octokit@2";

[Mahmoudgalalz]

GET https://esm.sh/v124/@octokit/auth-app@4.0.10/es2022/auth-app.mjs net::ERR_ABORTED 500 it give this error back, I tried it

[wolfy1339]

That is a caching problem on their side, it's not loading the most recent version of @octokit/auth-app.

I can probably push a fix for this to @octokit/app and then here

[Mahmoudgalalz]

I will try the solutions on the #2126

[wolfy1339]

https://github.com/octokit/octokit.js/issues/2450 has a more up-to-date conversation, it tracks the CDN issue on our side

[wolfy1339]

Please try this new release:

import { Octokit } from "https://esm.sh/octokit@2.0.19";

[Mahmoudgalalz]

Thanks 🎉