从 CRA（创建反应应用程序）迁移到 vite 后，未定义缓冲区

Question

After having declared and done all the config files, when I start the server I get Buffer not defined and the error points to an npm module.在声明并完成所有配置文件后，当我启动服务器时，我得到 Buffer not defined 并且错误指向 npm 模块。 Uncaught ReferenceError: Buffer is not definedat node_modules/jsesc/jsesc.js

Answer 1

You can make the following changes to fix the issue, in vite.config.ts, index.html and adding packages您可以在 vite.config.ts、index.html 和添加包中进行以下更改以解决此问题

1.Install Packages 1.安装包

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

2.Update vite.config 2.更新vite.config

import GlobalPolyFill from "@esbuild-plugins/node-globals-polyfill";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
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.Update index.html 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>

从 CRA（创建反应应用程序）迁移到 vite 后，未定义缓冲区

问题描述

1 个解决方案

解决方案1
0 2022-07-14 09:55:58

从 CRA（创建反应应用程序）迁移到 vite 后，未定义缓冲区

问题描述

1 个解决方案

解决方案1 0 2022-07-14 09:55:58

解决方案1
0 2022-07-14 09:55:58