How to shim Buffer and crypto?

[mattiaz9]

I've read several discussions on how to shim nodejs modules such as Buffer and crypto, but so far I've never been able to fix the error ReferenceError: Can't find variable: Buffer.

I tried using several rollup plugins. The last one I used is rollup-plugin-polyfill-node, but I still get the error.
I tried defining it in the vite config, but then I get this error: TypeError: undefined is not an object (evaluating 'Buffer.from').
I tried this #2785, but still it's not working.

I'm lost right now. Is there any way to make it work?

BTW I'm using web3, so I can't drop this dependency.

[patak-dev]

@mattiaz9 Ideally, the libraries you use in the browser shouldn't use node builtins.

But in the meantime, you can use https://github.com/snowpackjs/rollup-plugin-polyfill-node to shim Buffer and other node builtins. In your vite.config.js, after yarn add rollup-plugin-polyfill-node

import { defineConfig } from 'vite'
import polyfillNode from 'rollup-plugin-polyfill-node'

export default defineConfig({
  plugins: [
    polyfillNode()
  ],
  optimizeDeps: {
    exclude: ['web3'] // <= The libraries that need shimming should be excluded from dependency optimization.
  }
})

I tested locally, and this setup is working for me

import 'web3/dist/web3.min.js'
console.log(Web3)

[snehalbaghel]

@mattiaz9 Is there any open issue in 2.2 for this?

[mattiaz9]

@snehalbaghel not that I'm aware of

[savv]

For what it's worth, I gave up trying to mock out Buffer. Instead, I embraced it by importing the buffer libraries and changing a dependency (unzipper) that was problematic.

[weimingxinas]

the same problem

[jo32]

then same problem

[clarkbynum]

I used https://github.com/feross/buffer and include it in my entry point like so:

import { Buffer } from 'buffer';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
window.Buffer = Buffer;

ReactDOM.render(<App />, document.getElementById('root'));

Hope this works for others!

[shixinla]

import { Buffer } from 'buffer'

import { createApp } from 'vue'
import App from '@/App.vue'
import router from './router'
import VueI18n from './locales'
import './global.scss'

window.Buffer = Buffer

const app = createApp(App)
app.use(router)
app.use(VueI18n)
app.mount('#app')

Not works for me...

[clemsos]

Here is how I made it work on Sveltekit - cc @NoelJacob

import { browser } from '$app/env';

onMount(async () => { 
  if (browser) {
    const { Buffer } = await import('buffer') 
    window.Buffer = Buffer
  }
})

[gat786]

I tried the solution mentioned by @clarkbynum but still I get the error that Buffer is not defined. I am using vitejs, btw.

[WaterlessPiano2]

works with react-ts by just adding

 import { Buffer } from 'buffer';
window.Buffer = Buffer;

to main.tsx file

[aiinkiestism]

This solution was useful in Vite x vue3 x ether.js environment. really appreciate!

[souljorje]

Here: #3817 (comment)

[manzt]

Another solution I found was to inject buffer via optimizeDeps.esbuildOptions. My understanding is that this will add the Buffer import to each pre-bundled dependency, so that Buffer is available in the bundled dependency scope.

// buffer-shim.js
import { Buffer } from 'buffer';

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      inject: ['./buffer-shim.js'],
    }
  }
})

Of course, this means that every dep has an import for Buffer but these imports are collapsed in the final bundle.

[manzt]

I should point out that it seems like this strategy will only work for dev and build in >=v3.0.0-alpha.5.

• feat: non-blocking esbuild optimization at build time #8280

Before this, the esbuild shim would only be applied during dev.

[andersaamodt]

Unfortunately neither @patak-dev nor @manzt's method is working for me to get crypto working in the browser. When I try to use a crypto function it silently fails in browser (works on server and worked previously in client when shimmed with webpack).

[akash87]

@andersaamodt did you figure out any alternative ?

[Elfayer]

ChatGPT's solution:

function generateRandomValue(length) {
  var cryptoObj = window.crypto || window.msCrypto; // For compatibility with older browsers
  var randomValues = new Uint8Array(length);
  cryptoObj.getRandomValues(randomValues);
  return Array.from(randomValues, function (byte) {
    return ('0' + byte.toString(16)).slice(-2);
  }).join('');
}

Before: const value = crypto.randomBytes(20).toString('hex');
After: const value = generateRandomHexValue(20);

[zakcroft]

This works for me https://github.com/sodatea/vite-plugin-node-stdlib-browser

[zpcq123]

Thanks, use this to get jasypt up and running

[itxtoledo]

works like a charm

[stephenlacy]

Late to the question, this was the only polyfill plugin that worked for shimming crypto and buffer after trying all the existing plugins: https://github.com/davidmyersdev/vite-plugin-node-polyfills