Buffer is not defined | Vite

Hello,

I’m facing an issue which I, after hours of trying, can not solve.

“@walletconnect/web3-provider”: “^1.6.6”,

making use of rollup-plugin-polyfill-node as suggested in some posts, does not work. Any idea how to solve this issue?

I already make use of:

  <body>
    <!-- This is a hack to make web3 / walletconnect working with vite -->
    <script>window.global = window;</script>
    <script type="module">
        import process from "process";
        // import { Buffer } from "buffer";
        import { Buffer } from 'safe-buffer'
        import EventEmitter from "events";
        
        window.Buffer = Buffer;
        window.process = process;
        window.EventEmitter = EventEmitter;

        window.Buffer = window.Buffer || require('buffer').Buffer;

    </script>
    <div id="app" class="w-full bg-black"></div>

    <script type="module" src="/src/main.ts"></script>
  </body>

Issue Analytics

State:
Created 2 years ago
Comments:8

Top GitHub Comments

9reactions

Nuzzletcommented, Mar 26, 2022

Hey guys. I found another solution to this problem. I simply import wallet connect via: import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js'; and to get the types working, I made a d.ts file with: declare module '@walletconnect/web3-provider/dist/umd/index.min.js' { import WalletConnectProvider from '@walletconnect/web3-provider/dist/esm/index'; export default WalletConnectProvider }

5reactions

eikebartelscommented, Dec 8, 2021

I got it 😃

That’s how my config looks:

import * as path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pkg from './package.json'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  server: {
    fs: {
      strict: false
    }
  },
  plugins: [
    vue({
      script: {
        refSugar: true,
      },
    }),
  ],
  optimizeDeps: {
    exclude: [
              'web3', 
            ] // <= The libraries that need shimming should be excluded from dependency optimization.
  },
  build: {
    sourcemap: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    rollupOptions: {
			plugins: [inject({ Buffer: ['Buffer', 'Buffer'] })],
		},
  },
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
      util: 'util',
      '@': path.resolve(__dirname, './src'),
    },
  },
})

and my body:

<body>
    <!-- This is a hack to make web3 / walletconnect working with vite -->
    <script>window.global = window;</script>

    <div id="app" class="w-full bg-black"></div>

    <script type="module" src="/src/main.ts"></script>
  </body>