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

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量1.6k 收藏 4
点赞数 7
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44180427/article/details/131421693
版权

项目引入 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
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vite出现global is not defined和Buffer is not defined的解决方法
任磊
12-08 8818
vite出现global is not defined和Buffer is not defined的解决方法
基于webpack5的优化配置项
04-19
基于webpack5的优化配置项 optimmization
vue中使用amqplib 会报出Uncaught ReferenceError: Buffer is not defined错误
weixin_35756892的博客
01-13 4591
这个错误是由于Vue项目中缺少Buffer对象导致的。amqplib库在运行时需要使用Buffer对象来处理二进制数据，而在Vue项目中，Buffer对象可能没有被正确引入。 解决方法有两种： 在main.js文件中引入Buffer对象，如：global.Buffer = global.Buffer || require('buffer').Buffer 2.在webpack.config...
vue3 Uncaught ReferenceError: Buffer is not defined
zyzhan
05-15 1903
【代码】vue3 Uncaught ReferenceError: Buffer is not defined。
vite 项目提示 Buffer is not defined 问题解决
jiangjunyuan168的博客
02-24 2286
在 vite 搭建的 vue3 项目中使用 Buffer 对象报错 Buffer is not defined。1、首先安装...
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 .
Webpack升级到5的一系列坑
huyongchao98的专栏
12-02 4045
工程中的依赖webpack升级到5以后，遇到了一系列的报错，可能是webpack引起的，也可能是项目中的依赖导致的，问题如下： （1）Buffer is not defined 这个问题代码出在mqtt-packet这个依赖包中，查看github代码，该依赖包的工程根目录下：constants.js有一段代码： protocol.SESSIONPRESENT_HEADER = Buffer.from([protocol.SESSIONPRESENT_MASK]) 其中Buffer找不到定义了。.
vue3+vite4使用mqtt协议遇到的问题
xiaoliyo_的博客
08-14 2107
vue3+vite4使用mqtt遇到的版本问题以及buffer和globel等等其他问题
Buffer is not undefined
weixin_44891495的博客
11-26 577
React Buffer is not undefined
基于python的EC800物联网mqtt协议开发指南：从入门到实战
04-01
Paho-MQTT是Eclipse Paho项目的一部分，提供了多种语言的MQTT客户端库，包括Python。Python作为一门易于学习且功能强大的脚本语言，非常适合进行物联网应用的开发。Paho-MQTT Python库提供了一个简单易用的API，允许...
uniapp,微信小程序中使用 MQTT的问题
10-15
在开发基于uniapp的微信小程序时，集成MQTT通信可能会遇到一些挑战。本文将深入探讨这些问题及其解决方案，以便为开发者提供宝贵的参考。 首先，MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/...
iot.mqtt2kafkabridge:Mqtt 2卡夫卡桥
03-14
【标题】：“iot.mqtt2kafkabridge:Mqtt 2卡夫卡桥”是一个项目，它旨在实现MQTT消息代理与Apache Kafka之间的数据桥接。MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅式消息协议，常用于...
MQTT-ws:使用MQTT协议进行项目
05-13
Eclipse Paho Java客户端 Paho Java客户端是用Java编写的MQTT客户端库，用于开发在JVM或其他Java兼容平台（例如Android）上运行的应用程序Paho Java客户端提供了两个API：MqttAsyncClient提供了一个完全异步的API，...
关于在vue/vite项目中导入mqtt报出url错误的解决方案
badroad的博客
06-23 2123
使用的是vue cli 或者是vite cli创建的项目直接使用import导入mqtt报出关于url的错
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
使用vite + vue3 + mqtt时报错 ReferenceError: process is not defined
weixin_42946131的博客
09-06 815
全局环境变量被遗弃，变成了。
vue3+vite 连mqtt （遇到的坑的简单的demo）
Gy_gsdsb的博客
12-27 1154
当然，这只是我个人的一些收集和理解，在后续项目上线过程中，我会在这篇文章中持续更新遇到的坑和需要注意的东西，如果对文章中的内容有 不同意见 或者 发现我文章中错误的地方，可以评论或者私信我。上面就是一个简单的发布订阅和断开链接的demo，这里写的非常详细，因为我是做的支付，所以我这里默认的qos就是2了，这里的qos根据你不同的需要去更改，具体如下。，那是因为直接返回过来的是一个二进制数组，我们需要转化一下，当然，如果你需要的就是二进制数组就不需要转换了。下面就是写了，我这里有一个简单的订阅的例子。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1116
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue连接MQTT一直报错Uncaught ReferenceError: process is not defined
08-23
你遇到的错误是因为在浏览器环境中，`process` 对象并不存在，而它通常在 Node.js 环境中才能使用。因此，你不能直接在浏览器中使用 `process` 对象。 如果你想在 Vue 中连接 MQTT，可以尝试使用一些适配浏览器环境的 MQTT 客户端库，例如 `paho-mqtt` 或 `mqtt.js`。这些库提供了在浏览器中连接 MQTT 服务器的功能，并且不会依赖于 `process` 对象。 以下是使用 `paho-mqtt` 库的示例代码： 首先，你需要通过 npm 安装 `paho-mqtt` 库： ``` npm install paho-mqtt ``` 然后，在 Vue 组件中导入该库： ```javascript import { client } from "paho-mqtt"; // 创建 MQTT 客户端 const mqttClient = new client(); // 设置 MQTT 服务器的连接参数 mqttClient.connect({ onSuccess: onConnect }); // 连接成功的回调函数 function onConnect() { console.log("Connected to MQTT server"); // 订阅主题 mqttClient.subscribe("topic"); // 发布消息 mqttClient.send("topic", "Hello, MQTT!"); } ``` 请注意，具体的配置和用法可能因不同的 MQTT 客户端库而有所不同，请根据库的文档进行相应的设置和调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值