Vite errors

If you are using Vite as your build tool, you may encounter problems getting your app to render, accompanied by warnings such as Module "buffer" has been externalized for browser compatibility.

Why is this happening?

This is caused by missing Node polyfills in your bundled web application, as the ones provided by our SDK are not compatible with Vite.

How to fix this

To resolve this issue, you can specify your own polyfills in your vite config.

1. Install vite-plugin-node-polyfills

This package provides a number of polyfills for Node packages that are compatible with Vite.

Install with npm:

npm i --save-dev vite-plugin-node-polyfills

Install with yarn

yarn add --dev vite-plugin-node-polyfills

2. Configure Vite to use this plugin

Navigate to your Vite config: this is typically in the root of your project and will be named either vite.config.js or vite.config.ts. From here, add the line import { nodePolyfills } from 'vite-plugin-node-polyfills' to the top, and add nodePolyfills() to the plugins array inside defineConfig. A barebones config using React may look like this:

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

export default defineConfig({
  plugins: [
    react(), 
    nodePolyfills()
  ],
})

3. Restart your server

Typically, Vite will automatically restart the server for you and include your changes to its config file. If so, you're good to go! If not however, simply restart the server by terminating the process and re-starting using the relevant command (by default npm run dev or yarn dev in the project root).

More Troubleshooting

hdkey-without-crypto.js - Cannot read properties of undefined (reading 'from')

If you're encountering the following error in the browser console:

hdkey-without-crypto.js:18 Uncaught TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/ethereum-cryptography/pure/vendor/hdkey-without-crypto.js (hdkey-without-crypto.js:18:28)
    at __require (chunk-UN4YHSTI.js?v=2f4ead50:19:50)
    at node_modules/ethereum-cryptography/pure/hdkey.js (hdkey.ts:34:30)
    at __require (chunk-UN4YHSTI.js?v=2f4ead50:19:50)
    at node_modules/ethereumjs-wallet/dist.browser/hdkey.js (hdkey.ts:3:1)
    at __require (chunk-UN4YHSTI.js?v=2f4ead50:19:50)
    at node_modules/ethereumjs-wallet/dist.browser/index.js (index.ts:16:1)
    at __require (chunk-UN4YHSTI.js?v=2f4ead50:19:50)
    at index.js:1:18

This is caused by the ethereum-cryptography package, which has a dependency of the safe-buffer package. safe-buffer is missing the buffer package as a dependency. To fix this, install the buffer package into your project:

# npm 
npm install buffer

# yarn
yarn add buffer

Then restart update the vite.config.ts file to not include the Buffer polyfill:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      globals: {
        Buffer: false
      }
    })],
  // your config might not have this `define` section
  define: { 
    global: {},
  },
})

Finally, restart your Vite dev server and the error should be resolved.

Vite Preview - require is not defined

If you're using vite preview and encounter the error require is not defined in the browser console. Add the following to your build section of your vite.config.ts file:

// https://vitejs.dev/config/
export default defineConfig({
  /* your existing vite config */
  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    }
  },
})

This will allow Vite to transform mixed ES modules to CommonJS, which is required by the SDK.

Rebuild your project before running vite preview again.