Fetching a github repo in react gives a "Module "stream" has been externalized for browser compatibility and cannot be accessed in client code" error

user_17318939 0
Viewed 620

I am currently stuck with a problem trying to fetch github repo data using the octokit npm package. I use vite to run a dev server and when I try to make a request, the error that i get is:

Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

My React .tsx file looks like this:

import { Octokit, App } from 'octokit'
import React from 'react'

const key = import.meta.env.GITHUB_KEY
const octokit = new Octokit({
    auth: key
  })
await octokit.request('GET /repos/{owner}/{repo}', {
    owner: 'OWNER',
    repo: 'REPO'
  })
  
export default function Repos() {

  return (
    <>

    </>
  )
}

I have redacted the information for privacy purposes. If anyone knows how to resolve this issue with vite, please let me know!

vite typescript github-api reactjs fetch
1 Answers

Check first if this is similar to octokit/octokit.js issue 2126

I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project.

You'll need to install the isomorphic-fetch dependency before making this config change.

// svelte.config.js

const config = {   // ...   kit: {
    // ...
    vite: {
      resolve: {
       alias: {
         'node-fetch': 'isomorphic-fetch',
       },
     },
   },
 },
};

export default config;

Note: there are still questions about the support/development of octokit: issue 620.

VonC_63090
Related