vite引入web3及其他相关库等问题

2021-11-17

vite 使用web3，@walletconnect/web3-provider 或者其他库，出了一系列vite的相关问题

// example
Uncaught ReferenceError: process is not defined
Uncaught ReferenceError: global is not defined
Uncaught ReferenceError: Buffer is not defined
...........

最终解决方案

在 index.html添加

<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(),
  ]
}

添加这些依赖项 browserify-zlib, events, process, stream-browserify,util

最终完美解决

最新更新

build打包完，还是发现walletconnect的包有点问题。require,buffer之类的问题。
苦寻良久，解决方案
在vite.config.ts中添加如下配置

//vite.config.ts
  import  inject  from  '@rollup/plugin-inject'

  build: {
    rollupOptions: {
      // @ts-ignore
      plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill' import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

resolve: { alias: { '@': resolve(__dirname, 'src'), util: 'rollup-plugin-node-polyfills/polyfills/util', events: 'rollup-plugin-node-polyfills/polyfills/events', stream: 'rollup-plugin-node-polyfills/polyfills/stream', path: 'rollup-plugin-node-polyfills/polyfills/path', punycode: 'rollup-plugin-node-polyfills/polyfills/punycode', os: 'rollup-plugin-node-polyfills/polyfills/os', assert: 'rollup-plugin-node-polyfills/polyfills/assert', constants: 'rollup-plugin-node-polyfills/polyfills/constants', _stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex', _stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough', _stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable', _stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable', _stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform', timers: 'rollup-plugin-node-polyfills/polyfills/timers', vm: 'rollup-plugin-node-polyfills/polyfills/vm', zlib: 'rollup-plugin-node-polyfills/polyfills/zlib', tty: 'rollup-plugin-node-polyfills/polyfills/tty', domain: 'rollup-plugin-node-polyfills/polyfills/domain', buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6', process: 'rollup-plugin-node-polyfills/polyfills/process-es6' } }, optimizeDeps: { esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis' }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ process: true, buffer: true }), NodeModulesPolyfillPlugin() ] } }, build: { rollupOptions: { plugins: [ rollupNodePolyFill(), ], output: { } } }

评论区

Shengchao

另一个简单解决方案

import { nodePolyfills } from 'vite-plugin-node-polyfills'

vite.config.js

plugins: [
    nodePolyfills()
]

2024-4-17 16:14:04

这里更新新的node兼容方案

2024-1-3 15:42:44

Finyu

我也是线上环境使用web3的功能就报错：TypeError: Cannot read properties of undefined (reading 'call')

请教大佬可有解决？是什么原因？

跪谢！

2022-3-9 12:44:43

Haocun Ni

大佬，我配置了之后还是不可用，给你发邮件了

2022-3-4 14:31:04

2022-3-4 14:30:57

已邮件回复你了

2022-1-24 17:02:36

Psycho

江湖救急...你的prod模式没有任何问题吗，web3功能正常使用吗？我本地是没有问题的，一打包后使用功能就报错TypeError: Cannot read properties of undefined (reading 'call')。

2021-12-23 15:06:09

兄弟你好，我按照你的方式去做了，但是打包后，线上环境使用web3的功能就报错：TypeError: Cannot read properties of undefined (reading 'call')。这是什么问题呢，困扰我很久了...
希望你能帮帮我，我愿意有偿求助，方便留个联系方式吗，重谢！

2021-12-23 14:47:39

shengchao

nice

2021-12-14 14:25:33