Cannot use flow-js-sdk/fcl with Rollup or Vite bundlers

FCL, and its use fo grpc, relies on built-in node functions that are not usable in browser. These are currently polyfilled by webpack (I’ve heard this behaviour will going forward) but other bundlers do not work.

Solution: Don’t use grpc, or other node only stuff, for browser fcl.

I understand this is plan. If FCL didn’t rely on node then it would run freely in browser. Best option.

Solution: Figure out how to polyfill/shim node functions with Rollup/Vite.

In the mean time, I have not been able to get this working… maybe I’m missing something that should make this easier.

I have tried rollup-plugin-polyfill-node and @rollup/plugin-commonjs. These alias:

    vite: {
      resolve: {
        alias: {
          process: 'process/browser',
          stream: 'stream-browserify',
          zlib: 'browserify-zlib',
          util: 'util',
          http: 'http-browserify',
          https: 'https-browserify',
          'node-fetch': 'isomorphic-fetch',
          'process.env': 'import.meta.env',

Shims

import { Buffer } from 'buffer'
import process from 'process'
import EventEmitter from 'events'
import queueMicrotask from 'queue-microtask'
import url from 'url'

(window as any).global = window
window.Buffer = Buffer
window.EventEmitter = EventEmitter
window.process = process
window.queueMicrotask = queueMicrotask
window.url = url

These seems to cover most things but I’m still getting errors in grpc’s use of http/https libraries.

[alexmunoz1692]

Still happening on latest release

[samatechtw]

We also have this issue (Vue with Vite), and I’ve managed to bundle it and republished a package we consume internally here: https://github.com/samatechtw/onflow-fcl-esm

@muttoni You might be able to get some ideas from the rollup config there. It also includes (incomplete) typings, but I wouldn’t recommend using it in production yet.