Buffer is not defined

[wsw70]

When importing MQTT.js to a VueJS/Quasar app, I get the following error:

app.js:216 Uncaught ReferenceError: Buffer is not defined
    at eval (constants.js?885d:46)
    at Object../node_modules/mqtt-packet/constants.js (vendor.js:1729)
    at __webpack_require__ (app.js:213)
    at fn (app.js:477)
    at eval (parser.js?7aac:4)
    at Object../node_modules/mqtt-packet/parser.js (vendor.js:1779)
    at __webpack_require__ (app.js:213)
    at fn (app.js:477)
    at eval (mqtt.js?e7bd:1)
    at Object../node_modules/mqtt-packet/mqtt.js (vendor.js:1749)
eval @ constants.js?885d:46
./node_modules/mqtt-packet/constants.js @ vendor.js:1729
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ parser.js?7aac:4
./node_modules/mqtt-packet/parser.js @ vendor.js:1779
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ mqtt.js?e7bd:1
./node_modules/mqtt-packet/mqtt.js @ vendor.js:1749
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ client.js?9905:8
./node_modules/mqtt/lib/client.js @ vendor.js:1800
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ index.js?4c91:3
./node_modules/mqtt/lib/connect/index.js @ vendor.js:1822
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ index.js??clonedRuleSet-3.use[0]!./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/App.vue?vue&type=script&lang=ts:6
./node_modules/@quasar/app/lib/webpack/loader.js.transform-quasar-imports.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/App.vue?vue&type=script&lang=ts @ app.js:63
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ App.vue?vue&type=script&lang=ts:5
./src/App.vue?vue&type=script&lang=ts @ app.js:134
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ App.vue:6
./src/App.vue @ app.js:96
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ app.js:6
./.quasar/app.js @ app.js:19
__webpack_require__ @ app.js:213
fn @ app.js:477
eval @ client-entry.js:11
./.quasar/client-entry.js @ app.js:30
__webpack_require__ @ app.js:213
(anonymous) @ app.js:1387
__webpack_require__.O @ app.js:260
(anonymous) @ app.js:1388
(anonymous) @ app.js:1390

I tried (more or less randomly, after finding a similar issue) to

npm install Buffer

which chnaged the error to

Uncaught TypeError: Buffer.alloc is not a function
    at eval (constants.js?885d:128)
    at Array.map (<anonymous>)
    at eval (constants.js?885d:127)
    at Array.map (<anonymous>)
    at eval (constants.js?885d:126)
    at Array.map (<anonymous>)
    at genHeader (constants.js?885d:125)
    at eval (constants.js?885d:140)
    at Object../node_modules/mqtt-packet/constants.js (vendor.js:1707)
    at __webpack_require__ (app.js:213)

Please let me know if I can help with the debug.

[scarry1992]

It related with new webpack that used in new quasar app. Just add @babel/core to dev dependencies and extend quasar webpack config by new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] })

[wsw70]

@scarry1992 thanks a lot for the solution!

I did a npm install @babel/core --save-dev but I am not sure where to extend the webpack config?

[scarry1992]

in quasar.conf.js:
build: { extendWebpack (cfg) { cfg.plugins.push( new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ) } }

[wsw70]

After adding the config, I have a ReferenceError: webpack is not defined - should I define webpack somewhere? (sorry if this is obvious, this is beyond my limited knowledge)

[scarry1992]

Yes, you should import webpack in quasar.config.js

[wsw70]

I have all kinds of issues after the import. Would you be interested in a reproducible case (step by step), or should I just give up?

[scarry1992]

attach pls your quasar.config.js and package.json

[scarry1992]

That`s I described helped me in my lib, but...first link in quasar repo issues: https://quasar.dev/start/upgrade-guide#nodejs-polyfills

[tuxedo0801]

My quasar.conf.js looks different:

// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      // transpile: false,
      // publicPath: '/',

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: true, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://quasar.dev/quasar-cli/handling-webpack
      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
      chainWebpack (chain) {
        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
      },
    },

I'm new to quasar, and also new to mqttjs. So how do I add this line to my config?

build: { extendWebpack (cfg) { cfg.plugins.push( new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ) } }

Looks not really compatible ...

[update]

Ah, I think I got it:

      chainWebpack (chain) {
        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
      },

plus:

npm install node-polyfill-webpack-plugin

[Yu040419]

I use Vue CLI v5.0.0-beta.2 to build Vue 3 project and face the similar problem too.
Problem is solved by following steps:

1. install process and buffer

yarn add --dev buffer process

2. add webpack config into vue.config.js

const webpack = require(“webpack”);

module.export = {
  ...
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        process: "process/browser",
        Buffer: ["buffer", "Buffer"],
      }),
    ],
  },
}

[bbhxwl]

const webpack = require(“webpack”);

兄弟，有qq么，请教一下。

[ruthlessHardt]

This is because some modules are no longer introduced after the webpack version ‘V5’, the purpose is to reduce the packaging volume. Do like this could solve you problem #1294 (comment)

[doc-han]

[Solved here]
#1412 (comment)

[robertsLando]

I have fixed Browser docs by adding webpack and vite setup. Check them out