Flow Vue/Vite/Buffer hack

FlowVueBufferHack.md

Create a flow.config.ts file with the following :

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import builtins from "rollup-plugin-node-builtins";
import globals from "rollup-plugin-node-globals";
import nodePolyfills from "rollup-plugin-polyfill-node";

export const rollup = (): any[] => {
  return [
    builtins(),
    globals(),
    resolve({ browser: true, preferBuiltins: false }),
    commonjs({ exclude: ["queue-microtask"] }),
    nodePolyfills({ include: null }),
  ];
};

export const optimizeDepsInclude = (): string[] => {
  return [
    "queue-microtask",
    "@improbable-eng/grpc-web",
    "@improbable-eng/grpc-web-node-http-transport",
    "sha3",
    "@onflow/protobuf",
  ];
};

export const optimizeDepsExclude = (): string[] => {
  return ["@onflow/fcl"];
};

Which then gets called on your vite.config.ts file like so :

import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import * as flow from "./flow.config";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: { alias: { "@": path.resolve(__dirname, "/src") } },
  plugins: [vue(), flow.rollup()],
  optimizeDeps: {
    include: flow.optimizeDepsInclude(),
    exclude: flow.optimizeDepsExclude(),
  },
});

And here is my package.json file:

{
  "name": "origami",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@onflow/fcl": "^0.0.78",
    "@onflow/types": "^0.0.6",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@samatech/onflow-fcl-esm": "^0.6.0",
    "@types/rollup-plugin-node-builtins": "^2.1.2",
    "@types/rollup-plugin-node-globals": "^1.4.1",
    "@vitejs/plugin-vue": "^2.2.0",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-globals": "^1.4.0",
    "rollup-plugin-polyfill-node": "^0.8.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

Make sure to npm all of it ;)