Vite: Cannot read properties of undefined (reading 'from')

[andy-haynes]

Prerequisites

• I'm using the latest version of near-api-js.
• I have tried to start with a fresh project and reproduce the defect with minimal code changes.
• I have read the console error messages carefully (if applicable).

Description

Vite projects require a Buffer shim to use @near-js/client

@near-js/utils uses bs58, which relies on Buffer. Vite does not inject polyfills by default, so Vite projects must use additional configuration to use @near-js/client:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      globals: { Buffer: true }
    })
  ],
})

@near-js/client should be usable without this polyfill, so it needs to either

1. replace the bs58 dependency with one that does not rely on global Buffer or
2. inject the polyfill as part of the build process in @near-js/client

#1391 may be worth looking at first to see if the updated version works.

Reproducible demo

No response

Steps to reproduce

Import @near-js/client into a Vite project and run the app that calls a method for fetching/signing transactions (e.g. callViewMethod)

Expected behavior

🚫 🐛

✅ 🌞

Actual behavior

🐛

Your environment

• NEAR JavaScript API version used:
• Frontend framework (if applicable):
• Relevant dependencies (if applicable):

Self-service

• I'd be willing to fix this bug myself.

[calebjacob]

Just ran into this issue myself with a Vite React app. Thanks for the temporary polyfill example @andy-haynes.