Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Buffer is not defined | Vite #655

Closed
eikebartels opened this issue Nov 26, 2021 · 8 comments
Closed

Buffer is not defined | Vite #655

eikebartels opened this issue Nov 26, 2021 · 8 comments

Comments

@eikebartels
Copy link

Hello,

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

image

"@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>
@indrajitsinh
Copy link

I am also having the same issue using Vite

@armgit5
Copy link

armgit5 commented Nov 30, 2021

me too

@eikebartels
Copy link
Author

and @indrajitsinh || @armgit5 did you find a solution?

@eikebartels
Copy link
Author

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>

@matevzStinjek
Copy link

@eikebartels Thank you! This is massive for me rn :)

@dan-hale
Copy link

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 }

@Fabricevladimir Fabricevladimir mentioned this issue Apr 13, 2022
Merged
12 tasks
@baixiaoyu2997
Copy link

for nuxt3 user , there is a solution
https://github.com/nuxt/framework/discussions/4393

@toniengelhardt
Copy link

This solution worked for me with nuxt-3.0.0 and @wagmi/core:
https://stackoverflow.com/a/72978659/1384972

@migbash migbash mentioned this issue Feb 18, 2023
Closed
@Adamj1232 Adamj1232 mentioned this issue Jun 5, 2023
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@eikebartels @toniengelhardt @armgit5 @baixiaoyu2997 @indrajitsinh @dan-hale @matevzStinjek