Vite React项目安装opensea-js后出现Buffer重复声明语法错误

错误信息 #

Uncaught SyntaxError: Identifier 'Buffer' has already been declared (at chunk-EXX7LTSE.js?v=970d3bc1:19:3)

冲突原因 #

这个错误的核心是全局作用域内Buffer变量被重复声明：

• 你使用的vite-plugin-ngmi-polyfill会自动向浏览器全局注入Node.js核心模块的polyfill（包括Buffer）；
• 手动安装的buffer包，以及opensea-js的依赖（如以太坊生态相关库），也会尝试在全局声明Buffer；
• 三者的逻辑没有协调，导致变量重复定义，触发语法错误；
• Vite默认不支持浏览器环境运行Node.js核心模块，多种polyfill方案叠加加剧了冲突。

解决方案 #

1. 移除冲突的polyfill插件 #

首先卸载vite-plugin-ngmi-polyfill，它的自动注入逻辑是冲突的源头：

npm uninstall vite-plugin-ngmi-polyfill

同时修改vite.config.ts，删除该插件的导入和配置项。

2. 重新配置Vite的Buffer支持 #

更新vite.config.ts，通过resolve.alias和define来统一Buffer的注入逻辑：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import svgrPlugin from 'vite-plugin-svgr'

export default defineConfig({
  envDir: './env',
  plugins: [react(), tsconfigPaths(), svgrPlugin()],
  resolve: {
    alias: {
      buffer: 'buffer',
      timers: 'rollup-plugin-node-polyfills/polyfills/timers'
    },
    mainFields: ['browser', 'module', 'main']
  },
  define: {
    global: 'window',
    Buffer: 'Buffer'
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        globals: {
          buffer: 'Buffer'
        }
      }
    }
  }
})

3. 入口文件显式绑定全局Buffer #

在项目入口文件（如src/main.tsx）顶部添加以下代码，确保全局只有一个Buffer实例：

import { Buffer } from 'buffer'
window.Buffer = Buffer

4. 统一buffer依赖版本（可选） #

如果问题仍存在，检查依赖树中是否有多个版本的buffer，执行以下命令统一版本：

npm dedupe buffer

内容的提问来源于stack exchange，提问作者Hakan