[BUG]: Uncaught ReferenceError: global is not defined

[konsumer]

What happened?

If you setup a fresh vite site, and run npm i @octokit/core then import it with:

import { Octokit } from '@octokit/core'

You will see in web dev-console:

Uncaught ReferenceError: global is not defined
    at index.mjs:657:16

It appears to come from node-fetch, which should not be running in this web-context.

(judging by the code near this in the console)

In my top-level index.html, I can do this:

<script type="module">
    import { Octokit } from "https://cdn.skypack.dev/octokit";
    window.Octokit = Octokit
    </script>

and call it like this:

const octokit = new window.Octokit({ auth })

and it works fine, but this is not really standard frontend library usage (should be able to import it, directly.)

I recommend using cross-fetch which ponyfills more correctly on node environments and works correctly on frontend:

import fetch from 'cross-fetch'

It uses node-fetch, but wraps it correctly.

Versions

node 17.6.0, 18.5.0
vite 4.0.4
@octokit/core: 4.1.0

Relevant log output

No response

Code of Conduct

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

[damieng]

Running into this exact problem trying to use octokit from Nuxt 3 as well.

[gr2m]

Could you please test if this works correctly?

import { Octokit } from '@octokit-next/core'

[damieng]

Yes, that is working perfectly, thank-you!

[Ddupasquier]

Having same issue in svelte.

[wolfy1339]

As a workaround, for vite, svelte and similar environments, load the package from esm.sh:

import { Octokit } from "https://esm.sh/@octokit/[email protected]";

[zicklag]

I was able to fix this in my project ( SvelteKit + Vite ) by adding this to the vite config after installing isomorphic-fetch with pnpm:

  resolve: {
    alias: {
      'node-fetch': 'isomorphic-fetch',
    },
  },

Got the instructions from this StackOverflow thread, which also mentioned you might need to add:

define: {
  global: {}
}

[wolfy1339]

This will get resolved by octokit/request.js#586