项目引入 mqtt 报错 Uncaught ReferenceError: Buffer is not defined

最新推荐文章于 2025-01-17 19:22:45 发布
原创 最新推荐文章于 2025-01-17 19:22:45 发布 · 2.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

在Vite4.x+React18项目中引入mqtt.js时遇到浏览器报错UncaughtReferenceError:Bufferisnotdefined。尝试了多种解决方案，包括检查是否需要Node环境、添加polyfill和修改vite配置，但未见效。最后，通过直接引用mqtt.min.js文件在node_modules/dist目录下解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目引入 mqtt 报错 Uncaught ReferenceError: Buffer is not defined

最近在做一个 vite4.x + react18 的项目,需要引入 mqtt.js , 基操直接引入

import mqtt from 'mqtt'

结果浏览器直接报错 Uncaught ReferenceError: Buffer is not defined.
首先想到的是不是 mqtt.js 库不能用在浏览器上,可能是需要 node 环境?
头大,但是以前用 vue 2 的时候没有出现过这种问题.
然后各种百度, 各种刁难 gpt ,出来的解决方案都试了,没有啥用.
然后上 vite 的 github 查看 issue, 里面是各种加 vite 配置和 polyfill 插件,大概试了一遍,但是还是发现对我目前的项目没有生效.
后面破罐子破摔, 想了想, 直接进 node_modules 查看一下啥问题,发现有一个 dist 目录, 而且里面有 mqtt.js 文件和 mqtt.min.js ,就想着直接引用.于是修改了引入方式

import * as mqtt from 'mqtt/dist/mqtt.min';

结果就可以了…
今天真是投机取巧的一天啊…

L-linc
关注
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
wbajsjhhhhh的博客
05-03 1万+
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
uniapp - 解决mqtt报错 c.onOpen is not a function，在uniapp项目中使用MQTT（在uniapp小程序/h5网页/安卓苹果app端中使用mqtt协议报错解决）
高级前端工程师
12-29 1万+
uniapp，mqtt，报错，c.onOpen is not a function，uni-app使用mqtt报错，如何解决这个问题，uni.connectSocket，uniApp app端安卓苹果ios，uniapp小程序，uniapp h5平台，安装集成MQTT物联网协议无法使用，uniapp 使用mqtt 报错c.onOpen，mqtt最新版，降低版本还是报错，mqtt@3.0.0，uni.connectSocket没设置回调函数就会报错，使用mqtt连接不上，APP报错，最新解决办法，依旧不行，还
vite 项目提示 Buffer is not defined 问题解决
jiangjunyuan168的博客
02-24 6143
在 vite 搭建的 vue3 项目中使用 Buffer 对象报错 Buffer is not defined。1、首先安装...
vite搭建vue3的项目中，ReferenceError: Buffer is not defined
热门推荐
weixin_44679078的博客
12-20 2万+
问题： 下载文件，后端返回buffer，前端下载；浏览器报ReferenceError: Buffer is not defined 原因： 在页面中使用了Buffer，但是浏览器中JS没有Buffer对象，它是存在Node中。 解决： 将Buffer对象改用ArrayBuffer对象，ArrayBuffer对象是 ES6 才写入标准的。浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。 接口返回结果： 改写后的下载方法： func
vue中使用amqplib 会报出Uncaught ReferenceError: Buffer is not defined错误
weixin_35756892的博客
01-13 5021
这个错误是由于Vue项目中缺少Buffer对象导致的。amqplib库在运行时需要使用Buffer对象来处理二进制数据，而在Vue项目中，Buffer对象可能没有被正确引入。 解决方法有两种： 在main.js文件中引入Buffer对象，如：global.Buffer = global.Buffer || require('buffer').Buffer 2.在webpack.config...
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined
weixin_44164032的博客
09-29 1万+
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined 原因是因为没有在vue.config.js中配置ProvidePlugin // vue.config.js ... configureWebpack: { plugins: [ ... new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ] } Github .
vue3 Uncaught ReferenceError: Buffer is not defined
zyzhan
05-15 2266
【代码】vue3 Uncaught ReferenceError: Buffer is not defined。
Buffer is not defined解决
最新发布
twtqmq的博客
01-17 903
在写react项目时，可能使用到一些插件，它对应的返回值可能不是简单数据类型，而是Buffer。但项目上没装Buffer就会报如下错误at。
webpack升级后，报错Buffer is not defined
qq_46370075的博客
10-10 1161
webpack从4升级到5之后，如果用到了Buffer 会报错 Buffer is not defined。目前看是因为 webpack5 不再默认支持 Buffer，因此需要在配置里增加配置项。webpack.project.js 文件里 的plugins里新增。新增后 浏览器就支持Buffer了。
关于在vue/vite项目中导入mqtt报出url错误的解决方案
badroad的博客
06-23 2446
使用的是vue cli 或者是vite cli创建的项目直接使用import导入mqtt报出关于url的错
vite搭建vue3的项目中，ReferenceError Buffer is not defined
drnrrwfs的博客
03-09 1664
问题： 下载文件，后端返回buffer，前端下载；浏览器报ReferenceError: Buffer is not defined 原因： 在页面中使用了Buffer，但是浏览器中JS没有Buffer对象，它是存在Node中。 解决： 将Buffer对象改用ArrayBuffer对象，ArrayBuffer对象是 ES6 才写入标准的。浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。 接口返回结果： 改写后的下载方法： func
mqtt-packet:轻而易举地解析并生成MQTT数据包
04-29
数据包 编码和解码MQTT 3.1.1、5.0包的节点方式。 该库已通过节点v6，v8，v10，v12和v14进行了测试。 支持旧版本节点的最新版本是mqtt-packet@4.1.2。 安装 npm install mqtt-packet --save 例子 产生中 const mqtt = require ( 'mqtt-packet' ) ; const object = { cmd : 'publish' , retain : false , qos : 0 , dup : false , length : 10 , topic : 'test' , payload : 'test' // Can also be a Buffer } ; const opts = { protocolVersion : 4 } ; // default is 4. Us
vite出现global is not defined和Buffer is not defined的解决方法
任磊
12-08 1万+
vite出现global is not defined和Buffer is not defined的解决方法
uniapp - 完美解决 mqtt 插件报错：socketTask onOpen is not a function问题（在uniapp小程序/h5网页/安卓苹果app端中使用mqtt协议报错解决）
高级前端工程师
01-16 3857
uniapp，mqtt，报错，onOpen，uniapp mqtt使用onOpen报错，uniapp引入mqtt物联网协议报错怎么办，uniapp安卓苹果app端/h5网页/小程序中使用mqtt协议报错解决，uniapp使用mqtt控制台报错socketTask onOpen is not a function如何解决，如何解决报错，怎么解决该报错，uniapp 连接mqtt H5正常连接成功，APP报错 socketTask.onOpen is not a function，在nvue中报错TypeErr
webpack5升级踩坑（process、Buffer is not defined）
张兴华的博客
03-30 1670
执行提示@types/node 版本和ts版本问题，https://www.npmjs.com/package/@types/node?activeTab=versions 可查看版本对应的ts版本。
vite打包后出现 buffer is undefined问题修复
qq_34486756的博客
09-21 1537
【代码】vite打包后出现 buffer is undefined问题修复。
关于Uncaught ReferenceError $ is not defined的报错问题解决
qq_44260772的博客
11-11 2655
关于Uncaught ReferenceError: $ is not defined的报错问题解决
vue3+vite4使用mqtt协议遇到的问题
xiaoliyo_的博客
08-14 2824
vue3+vite4使用mqtt遇到的版本问题以及buffer和globel等等其他问题
Uncaught ReferenceError: xxx is not defined
HuaSir的博客
01-29 1115
问题描述 在js中定义了一个函数，想要在onclick事件中触发调用，但总是报Uncaught ReferenceError，百度说是js还没渲染完就调用，导致报错。有提出说把函数定义放在window.οnlοad=function(){}里面。 解决方法 发现在<script type="text/javascript"></script>前面，我还引用了一个jQuery...
mqtt.js?v=c7ab9d65:11704 Uncaught (in promise) ReferenceError: wx is not defined
01-14
### 关于 `wx` 未定义错误 当遇到 `ReferenceError: wx is not defined` 错误时，这通常意味着尝试访问的对象或变量 `wx` 并不存在当前的作用域内[^1]。对于 Vue 应用程序中的此问题，可能的原因是在挂载钩子中直接使用了微信 JSSDK 的全局对象 `wx` 而没有正确引入该 SDK 或者在不支持的环境中运行。 针对 MQTT.js 使用场景下的解决方案如下： #### 确认环境兼容性 确保应用程序正在合适的环境下执行。`wx` 是由微信客户端提供的 JavaScript 接口库的一部分，在浏览器端或其他非微信内置 WebView 中不会自动加载这些接口。如果项目既要在 Web 上也要在小程序上工作，则需区分不同平台并有条件地导入依赖项。 #### 条件判断与模块懒加载 为了防止不必要的全局污染以及提高性能，可以采用条件语句来检测是否处于微信环境中再动态加载所需的脚本文件。下面是一个简单的实现方式： ```javascript if (typeof wx !== 'undefined') { import('mqtt').then(mqtt => { const client = mqtt.connect(/* your broker url */); // Your code here... }); } else { console.warn('Current environment does not support WeChat API'); } ``` 通过这种方式可以在仅限必要的时候才去请求外部资源，同时也避免了因缺少特定上下文而导致的异常抛出。 #### 修改构建配置 如果是基于打包工具（如 Webpack）进行开发的话，还可以考虑调整其配置以适应多端需求。例如利用 DefinePlugin 插件设置环境标志位从而影响最终输出的内容；或者借助 UMD(Universal Module Definition) 形式的包管理策略让各个框架之间更好地协作而不发生命名空间冲突等问题[^2]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值