React未捕获的ReferenceError错误：未定义Buffer。

Question

我通过运行 npx create-react-app my-app 创建了一个 React 项目。

我安装了 mqtt-react-hooks。

我添加了 App 脚本。

import { Connector } from 'mqtt-react-hooks';

import Status from './Status';

function App() {
    return (
        <Connector
          brokerUrl="mqtt://127.0.0.1:80/"
          parserMethod={(msg) => msg} // msg is Buffer
        >
          <Status />
        </Connector>
  );
}

export default App;

---

我在控制台中看到了这个错误

- Yehuda Zadik

---

请勿发布文字图片，它们难以阅读、无法搜索，并且对使用屏幕阅读器的人不友好。请复制并粘贴实际文本，然后使用工具栏进行格式设置。 - hardillb

这个问题有帮助吗？https://github.com/mqttjs/MQTT.js/issues/1294 - Will Jenkins

问题已解决 https://dev59.com/MFEG5IYBdhLWcg3wSZIS - Yehuda Zadik

Answer 1

如此处的答案所提到，请同时考虑以下内容：

npm install --save buffer

import {Buffer} from 'buffer';

如果存在外部库依赖，则无法帮助，但在代码中直接使用Buffer时可以避免还原其他库。

- N Molchanov

Answer 2

在出现错误的页面或函数上使用此方法：

window.Buffer = window.Buffer || require("buffer").Buffer;

- munal

---

谢谢，我尝试了100种方法，但只有这一行有效！谢谢！ - Martin Tonev

Answer 3

我也遇到了这个问题。

最近我创建了一个新版本的React应用程序，当我使用mqtt.js（而不是mqtt-react-hooks）时，出现了这个错误！

我发现Webpack 5不支持Buffer等内容。Webpack 5删除了Buffer（请参见此信息），这实际上破坏了MQTT库，因为它在代码中有明确的用途。

所以我降级到Webpack 4，现在它可以正常工作了。如果您不知道如何操作，请参考如何将Webpack版本降级？

- Muhammad Habibpour

Answer 4

对我来说，将react-scripts降级到4.0.3版本解决了问题。虽然这不是一个适当的修复方法，但也算是一种解决方案...

在我的情况下，我还需要执行以下操作：

1. 在package.json中使用react-script 4.0.3
2. 删除package-lock.json文件
3. 删除node_modules文件夹
4. 运行npm install

经过这些步骤后，一切似乎都正常工作了。

- Iván

Answer 5

对我有效的唯一解决方案是：

npm add node-stdlib-browser
npm add -D vite-plugin-node-stdlib-browser

然后：

// vite.config.js
import { defineConfig } from 'vite'
import nodePolyfills from 'vite-plugin-node-stdlib-browser'

export default defineConfig({
  // other options
  plugins: [nodePolyfills()]
})

- Mariusz

Answer 6

在Webpack 5版本中，如果Node.js API不再被本地支持，Webpack将不再自动进行polyfill。浏览器环境不支持Buffer，因此我们现在需要在Webpack配置中添加第三方Buffer包，并指向Node.js。请参见如何使用Webpack 5进行polyfill Buffer。

- Allbutone

Answer 7

对我有效的是：

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

- Bruno Gomes