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.