vite use web3.js throw Uncaught ReferenceError: process is not defined

[okevinok]

To solve the problem "global is not defined "

import { defineConfig, UserConfigExport, ConfigEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; import polyfillNode from 'rollup-plugin-polyfill-node' export default defineConfig({ plugins: [ vue(), polyfillNode() ], optimizeDeps: { exclude: ['dragula'] } })
and then throw Uncaught ReferenceError: process is not defined, problem .
so How can I fix it? thanks!

[okevinok]

then use this to fix process problem.
define: { 'process.env': process.env },
but occur new problem，
Uncaught ReferenceError: Buffer is not defined

[Niputi]

replace 'dragula' with the web3 dependency

[okevinok]

then

[okevinok]

replace 'dragula' with the web3 is doesn't work , can import the commonJS module, beacuse vite only support ES module。

so I just want use plugin to fix this, but can't resolve!

it doesn't work

[okevinok]

[okevinok]

@underfin @Niputi

[okevinok]

npm install buffer

<script type="module">
    import { Buffer } from "buffer";
    window.Buffer = Buffer;
</script>

didn't solve !

[Shinigami92]

npm install buffert

@1329778364 Could you try buffer instead of buffert?

[okevinok]

npm install buffert

@1329778364 Could you try buffer instead of buffert?

Yeah I install Buffer， but doesn't workout

[Shinigami92]

@1329778364 Could you please do me a favor and create a reproduction repo
Also you haven't used the issue template for a bug report 🙁 Would be cool if you use this next time

[github-actions]

Hello @1329778364. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[okevinok]

@1329778364 Could you please do me a favor and create a reproduction repo
Also you haven't used the issue template for a bug report 🙁 Would be cool if you use this next time

https://github.com/1329778364/vite_vue3_web3/tree/main

[okevinok]

use vue-cli webpack doesn't has this problem, but use vite has , the project is follow 👍 https://github.com/1329778364/vite_vue3_web3/tree/main

[admin00001]

I have this problem too! so vite it is not perfect, maybe I should keep to use webpack for my project.

[Niputi]

added to head html file

<script>window.global = window;</script>
<script type="module">
    import process from "process";
    import { Buffer } from "buffer";
    import EventEmitter from "events";
    
    window.Buffer = Buffer;
    window.process = process;
    window.EventEmitter = EventEmitter;
</script>

vite.config.ts

import vue from '@vitejs/plugin-vue'

export default {
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
      util: 'util'
    }
  },
  plugins: [
    vue(),
  ]
}

add these dependencies browserify-zlib, events, process, stream-browserify, util

[admin00001]

i dont understand why to set

window.process = process;

and vite.config.ts

process: "process/browser",

together

[okevinok]

added to head html file

<script>window.global = window;</script>
<script type="module">
    import process from "process";
    import { Buffer } from "buffer";
    import EventEmitter from "events";
    
    window.Buffer = Buffer;
    window.process = process;
    window.EventEmitter = EventEmitter;
</script>

vite.config.ts

import vue from '@vitejs/plugin-vue'

export default {
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
      util: 'util'
    }
  },
  plugins: [
    vue(),
  ]
}

add these dependencies browserify-zlib, events, process, stream-browserify, util

完美解决了我的问题，但是我还是想知道为什么这么解决 ，从而学到更多知识。
It solved my problem perfectly, but I still want to know how to solve it and why . so that I can learn more.

[okevinok]

when I run npm build get this problem

[Niputi]

have created a pull request to your reproduction showing working dev and build for me

[okevinok]

You are so cool.

[ngduc]

Thanks @Niputi That works for dev mode, but not in Prod build.

I also fixed it for Prod build by using browserify to include those libs here https://github.com/coddx-hq/create-web3js-app