Base45 - 未捕获的 ReferenceError：未定义缓冲区（React JS）答案

【问题标题】：Base45 - Uncaught ReferenceError: Buffer is not defined (React JS)Base45 - 未捕获的 ReferenceError：未定义缓冲区（React JS）
【发布时间】：2022-07-01 06:46:48
【问题描述】：

美好的一天。我有通过 create-react-app 创建的应用程序，我正在尝试为 covid greenpass 创建解码器。我对 base45 解码有疑问。它会导致如下错误：

base45-js.js:60 Uncaught ReferenceError: Buffer is not defined
    at Object.decode (base45-js.js:60:1)
    at CovidPass (CovidPass.js:10:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)

这里是代码。任何想法如何解决这个问题？

import React from 'react';
import cbor from 'cbor-web';
import base45 from 'base45';
import pako from 'pako';   

const CovidPass = () => {
    const decodedBase45 = base45.decode('I2B-KEP2');
    console.log(decodedBase45);

    return (
        <p>{decodedBase45}</p>
    );
}

export default CovidPass;

【问题讨论】：

标签： javascript reactjs base45

【解决方案1】：

这是来自这里的旧答案：

安装浏览器缓冲包：

npm install --save buffer

导入直接使用，例子：

import {Buffer} from 'buffer';
Buffer.from('anything','base64');

参考：
Uncaught ReferenceError: Buffer is not defined in React

【讨论】：

不适用于 base45 编码。任何提示如何在我的代码中使用它？

【解决方案2】：

我通过将package.json 中的"react-scripts": "5.0.0" 降级为"react-scripts": "4.0.3" 并运行npm install 解决了这个问题。但我认为有更好的解决方案。

【讨论】：

【解决方案3】：

对我来说有效的是：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import inject from '@rollup/plugin-inject'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    },
    build: {
        rollupOptions: {
            plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
        },
    },
})

回复此评论：

https://github.com/vitejs/vite/discussions/2785#discussioncomment-1452855

【讨论】：