Error when using isomorphic-git with vitejs

I setup a react typescript project using npm init @vitejs/app and added isomorphic-git as a dependency. On running the project locally, I am getting the following error:

Uncaught TypeError: Cannot read property 'from' of undefined
    at node_modules/safe-buffer/index.js (index.js:11)
    at __require (chunk-KYLA5N2V.js?v=de250cfb:12)
    at node_modules/sha.js/hash.js (hash.js:1)
    at __require (chunk-KYLA5N2V.js?v=de250cfb:12)
    at node_modules/sha.js/sha1.js (sha1.js:11)
    at __require (chunk-KYLA5N2V.js?v=de250cfb:12)
    at index.js:2

Browser: Brave Version 1.24.86 Chromium: 90.0.4430.212 (Official Build) (64-bit) Node version: 12.14.1

Steps to reproduce:

1. Setup a new project using npm init @vitejs/app
2. Add isomorphic-git as a dependency
3. Use any method of ismorphic-git in the project

This project can be cloned to reproduce the error

I have been using ismorphic-git with a project created using create-react-app and it’s working fine. Only facing this issue with vitejs.

[joelspadin]

I think this is caused because Vite doesn’t attempt to polyfill Node builtins. I couldn’t get a rollup polyfill working, but I did find an alternative solution at https://github.com/vitejs/vite/issues/2618#issuecomment-804399828. With the CDN plugin, you can make Vite use a browserified version:

First, since the CDN plugin is still a work in progress, copy this into your project https://github.com/vitejs/vite/tree/plugin-cdn/packages/plugin-cdn and install it as a dependency:

npm i -D ./plugins/plugin-cdn

Then use it in your vite.config.ts to grab a browserified version of isomorphic-git:

import cdn from '@vitejs/plugin-cdn';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        cdn('skypack', {
            'isomorphic-git': '^1.8.3',
        }),
    ],
});

I haven’t tested whether the package actually works yet, but at least I’m past the error when importing it.

[joelspadin]

The above works when running the vite dev server, but I ran into issues when running vite build. If I understand the issue correctly, a node builtins rollup polyfill would work but only for vite build and not when running the dev server. I just aliased each node module to a polyfill instead:

My vite.config.ts now looks like this:

import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [reactRefresh()],
    resolve: {
        alias: {
            buffer: 'buffer',
            'node-fetch': 'isomorphic-fetch',
            http: 'stream-http',
            https: 'https-browserify',
            process: 'process/browser',
            stream: 'stream-browserify',
            // https://github.com/nodejs/readable-stream/issues/348
            'readable-stream': 'vite-compatible-readable-stream',
            string_decoder: 'string_decoder',
            url: 'url',
            util: 'util',
        },
    },
});

(npm install each of the packages in the alias map’s values.)

I have an additional polyfills.js that I’m importing in my main script file to handle Node globals:

import { Buffer } from 'buffer';
import * as process from 'process';

window.global = window;
window.process = process;
window.Buffer = Buffer;

I’m also using those polyfills to get @octokit/rest.js working, so some of that may not be necessary for just isomorphic-git.