Fix/browser issues

[pawanpaudel93]

ArweaveKit for Web

Context

As a developer, I want to use ArweaveKit in frontend projects built using Vite, Webpack, etc. As of now, there are several dependency-related issues. While building any frontend project that uses arweavekit, it fails with errors that are related to unsupported dependencies in a browser environment. Even after attempting to polyfill many packages involved in the issue, this still remains to be a problem.

Steps to reproduce

1. start a new react project using Vite or Webpack

2. install arweavekit with the command npm i arweavekit

3. import createTransaction method from arweavekit/transaction

4. build the app using npm run build

5. Build fails

Bug Fixes

• Fix build issues caused by @bundlr-network/client package
• Fix arweave init issue in nextjs

Manual Polyfill needed for @bundlr-network/client package in Vite & Webpack projects

• Vite: Buffer & other modules can be polyfilled using vite-plugin-node-polyfills

  For example, Vite react project:

  vite.config.ts

  
  import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react-swc";
  import { nodePolyfills } from "vite-plugin-node-polyfills";

  // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), nodePolyfills()], });

• Webpack: Buffer & other modules can be polyfilled using node-polyfill-webpack-plugin

  For example, To polyfill the modules using arweavekit with npx create-react-app:

  Install first react-app-rewired, a package that allows for editing of the webpack config file to fix the polyfill issue.

  https://docs.bundlr.network/developer-docs/recipes/react