Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Buffer is not defined | Vite

See original GitHub issue

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>