reactjs React-vite中未定义缓冲区

6kkfgxo0 于 2022-12-12 发布在 React

关注(0)|答案(4)|浏览(161)

从CRA迁移后未定义缓冲区（创建React应用程序）

“vite”：“^2.7.12”
我试着添加插件，为Buffer添加define，但没有效果。

const viteConfig = defineConfig({
/*    define: {
        "Buffer": {}
    },*/
    plugins: [reactRefresh(), react()],
    build: {
        rollupOptions: {
            input: {
                main: resolve('index.html'),
            },
        },
    },
    clearScreen: false
});

reactjs

来源：https://stackoverflow.com/questions/70714690/buffer-is-not-defined-in-react-vite

4条答案

按热度按时间

hfsqlsce1#

安装此库
@esbuild-plugins/节点-全局-聚合体填充
并将其添加到vite.config.js中

export default defineConfig({
    // ...other config settings
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
})

将此库导入添加到vite.config.js

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

赞(0）回复(0）举报 2022-12-12

ylamdve62#

我也在这里登陆，我尝试了Николай Сычев solution从2015年，但它没有工作.
相反，在2022年我成功了
1.简单地将缓冲区安装为dev依赖项yarn add buffer（如果使用npm，则使用npm等效项）
1.然后将其添加到index.html中的全局范围，如下所示：

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

它也适用于类似的依赖项，例如您在index.html中导入的process，如下所示：

import process from "process";
      window.process = process;

也许最初的发帖者可能会更新接受的答案，因为使用@esbuild-plugins/node-globals-polyfill的方法似乎不再是推荐的方法（当尝试polyfill过程时，我会得到一些奇怪的“重新声明”错误）。
我在这里提出的方法似乎是最先进的方法。

赞(0）回复(0）举报 2022-12-12

4c8rllxm3#

对我来说，上面的配置不工作，我不得不在3个文件中进行更改，在vite.config.ts，index.html和添加包

1.安装软件包

yarn install process util buffer events
yarn add @esbuild-plugins/node-modules-polyfill

2.更新vite.配置

import GlobalPolyFill from "@esbuild-plugins/node-globals-polyfill";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
        esbuildOptions: {
            define: {
                global: "globalThis",
            },
            plugins: [
                GlobalPolyFill({
                    process: true,
                    buffer: true,
                }),
            ],
        },
    },
    resolve: {
        alias: {
            process: "process/browser",
            stream: "stream-browserify",
            zlib: "browserify-zlib",
            util: "util",
        },
    },
});

3.更新索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/src/assets/images/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <script>
    window.global = window;
  </script>
  <script type="module">
    import process from "process";
    import EventEmitter from "events";
    import {Buffer} from "buffer";
    window.Buffer = Buffer;
    window.process = process;
    window.EventEmitter = EventEmitter;
  </script>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="./src/index.js"></script>
</body>
</html>

赞(0）回复(0）举报 2022-12-12

xxb16uws4#

另一种做法是：