import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";
export default defineConfig({
  // Other rules...
  resolve: {
    alias: {
      util: "util/",
  optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            // Enable esbuild polyfill plugins
            plugins: [
              NodeGlobalsPolyfillPlugin({
                buffer: true,
                process: true,
              NodeModulesPolyfillPlugin(),
    build: {
      rollupOptions: {
        // Enable rollup polyfills plugin
        // used during production bundling
        plugins: [nodePolyfills()],
mq.ts
import { connect } from 'mqtt'
let client: any = null
const options: any = {
  clean: true,
  connectTimeout: 4000,
  reconnectPeriod: 2000,
  username: 'test',
  password: 'test',
export const conn = (opt: any, topic: string, callback: any, errHandler: any) => {
  if (opt.pid !== undefined && opt.pid !== '') {
    options.clientId = `${opt.pid}_${Math.random().toString(16).substring(2, 8)}`
  client = connect(import.meta.env.VITE_APP_MQTT, options)
  client.on('connect', () => {
    if (topic !== undefined && topic !== '') {
      subscribe(topic, errHandler)
  client.on('message', (topic: string, message: string) => {
    callback(topic, message)
  client.on('error', (error: Error) => {
    errHandler(error)
export const subscribe = (topic: string, errHandler: any) => {
  if (client !== undefined && client !== null) {
    try {
      client.subscribe(topic, (err: Error) => {
        if (err) {
          if (errHandler !== undefined && errHandler !== null) {
            errHandler(err)
    catch (error) {
      if (errHandler !== undefined && errHandler !== null) {
        errHandler(error)
export const unsubscribe = (topic: string, errHandler: any) => {
  if (client !== undefined && client !== null) {
    try {
      client.unsubscribe(topic, (err: Error) => {
        if (err) {
          if (errHandler !== undefined && errHandler !== null) {
            errHandler(err)
    catch (error) {
      if (errHandler !== undefined && errHandler !== null) {
        errHandler(error)
export const publish = (topic: string, message: string) => {
  if (client !== undefined && client !== null) {
    client.publish(topic, message)
export const disconnect = () => {
  if (client !== undefined && client !== null) {
    client.end()
          
@robertsLando thk for your help.  I tried the configuration method you suggested, but I'm still getting the same error. then I changed to the following configuration:
return defineConfig({
    ......
    resolve: {
        alias: {
           // 'util': 'util/',
    ........
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: false,
            process: true,
          NodeModulesPolyfillPlugin(),
the error changed to: "Buffer is not defined".
Finally, I found another solution online that solved it:

pnpm add buffer
In the main.ts entry file, add the following code:
import * as buffer from 'buffer/index';
if (typeof (window as any).global === "undefined"){
  (window as any).global = window;
if (typeof (window as any).Buffer === "undefined") {
  (window as any).Buffer = buffer.Buffer;
Now it looks normal
          
Sure, I'm using the following dependencies:
  "dependencies": {
    "@aacassandra/vue3-progressbar": "^1.0.3",
    "@popperjs/core": "^2.11.8",
    "axios": "^1.4.0",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^5.3.1",
    "bootstrap-icons": "^1.10.5",
    "bpmn-js": "^13.2.2",
    "moment": "^2.29.4",
    "mqtt": "^5.0.2",
    "mxgraph": "^4.2.2",
    "url": "^0.11.1",
    "uuid": "^9.0.0",
    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.2.4",
    "vuex": "^4.1.0"
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "@typescript-eslint/parser": "^6.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-typescript": "^11.0.3",
    "cypress": "^12.17.3",
    "eslint": "^8.45.0",
    "eslint-plugin-vue": "^9.15.1",
    "rollup-plugin-polyfill-node": "^0.12.0",
    "sass": "^1.64.2",
    "typescript": "^5.1.6",
    "vite": "^4.4.8"
Edit: Changed to problematic package list.
          
I got the same error:
Uncaught SyntaxError: Identifier 'Buffer' has already been declared (at mqtt.js?v=bc346047:639:1)
My environment:

vue3 vite4 mqtt 5.0.2
vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import nodePolyfills from 'rollup-plugin-polyfill-node'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: false,
          process: true
        NodeModulesPolyfillPlugin()
  css: {
    cssPreprocessOptions: {
      scss: {
        additionalData: '@import "/src/uni.scss";'
  build: {
    rollupOptions: {
      plugins: [nodePolyfills()]
dependencies:
 "dependencies": {
    "@dcloudio/uni-app": "3.0.0-3080720230703001",
    "@dcloudio/uni-app-plus": "3.0.0-3080720230703001",
    "@dcloudio/uni-components": "3.0.0-3080720230703001",
    "@dcloudio/uni-h5": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-jd": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-lark": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-qq": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "mqtt": "^5.0.2",
    "mqtt-packet": "^8.2.0",
    "protobufjs": "^7.2.4",
    "vue": "^3.3.4",
    "vue-i18n": "^9.1.9",
    "vuex": "^4.0.2"
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "3.0.0-3080720230703001",
    "@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
    "@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "autoprefixer": "^10.4.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.10.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-vue": "^8.5.0",
    "husky": "^7.0.0",
    "lint-staged": "^12.3.5",
    "node-sass": "^7.0.1",
    "protobufjs-cli": "^1.1.1",
    "rollup-plugin-polyfill-node": "^0.12.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "typescript": "^4.5.2",
    "vite": "4.1.4",
    "vue-eslint-parser": "^8.3.0"
Is it possible that the mqtt package is conflicting with the protobuf package?
import * as buffer from 'buffer/index';
if (typeof (window as any).global === "undefined"){
  (window as any).global = window;
if (typeof (window as any).Buffer === "undefined") {
  (window as any).Buffer = buffer.Buffer;
It doesn't work for me
          
Another error occurs if the mqtt-packet package is uninstalled:
index.js:6 Uncaught ReferenceError: Buffer is not defined
    at ../../node_modules/.pnpm/duplexify@4.1.2/node_modules/duplexify/index.js (index.js:6:21)
    at __require (chunk-NRVJP6XN.js?v=0ab60ace:9:50)
    at ../../node_modules/.pnpm/mqtt@5.0.2/node_modules/mqtt/build/lib/connect/wx.js (wx.ts:5:1)
    at __require (chunk-NRVJP6XN.js?v=0ab60ace:9:50)
    at ../../node_modules/.pnpm/mqtt@5.0.2/node_modules/mqtt/build/lib/connect/index.js (index.ts:23:17)
    at __require (chunk-NRVJP6XN.js?v=0ab60ace:9:50)
    at ../../node_modules/.pnpm/mqtt@5.0.2/node_modules/mqtt/build/mqtt.js (mqtt.ts:12:1)
    at __require (chunk-NRVJP6XN.js?v=0ab60ace:9:50)
    at mqtt.ts:26:21
dependencies:
"dependencies": {
    "@dcloudio/uni-app": "3.0.0-3080720230703001",
    "@dcloudio/uni-app-plus": "3.0.0-3080720230703001",
    "@dcloudio/uni-components": "3.0.0-3080720230703001",
    "@dcloudio/uni-h5": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-alipay": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-baidu": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-jd": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-lark": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-qq": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
    "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "mqtt": "^5.0.2",
    "protobufjs": "^7.2.4",
    "vue": "^3.3.4",
    "vue-i18n": "^9.1.9",
    "vuex": "^4.0.2"
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "3.0.0-3080720230703001",
    "@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
    "@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "autoprefixer": "^10.4.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.10.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-vue": "^8.5.0",
    "husky": "^7.0.0",
    "lint-staged": "^12.3.5",
    "node-sass": "^7.0.1",
    "protobufjs-cli": "^1.1.1",
    "rollup-plugin-polyfill-node": "^0.12.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "typescript": "^4.5.2",
    "vite": "4.1.4",
    "vue-eslint-parser": "^8.3.0"
          
In order to use mqttjs in browser, just import it like:
import * as mqtt from 'mqtt/dist/mqtt.min'
there is no need of any configuration both in vite/webpack then