ReferenceError: Buffer is not defined ReactJS

[yaminagile]

I have react app which is created by create-react-app and follow the rules that provides here
https://github.com/mqttjs/MQTT.js#react

But when I start my app I am getting following error

constants.js:46 Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/mqtt/node_modules/mqtt-packet/constants.js (constants.js:46:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/mqtt/node_modules/mqtt-packet/parser.js (parser.js:4:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/mqtt/node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1)

I have look around similar to this issue but it didn't help me.

I am using react version 17.0.2 and react-scripts version 5.0.0

I am gone through this issue
#1294

But it didn't help me because I don't have any webpack config file on my react app.

[flyfishzy]

I have the same probelm as you, and have submitted a PR.

[YoDaMa]

@flyfishzy I see the PR is merged in mqtt-packet. is the problem in our dependency version in mqtt.js?

[flyfishzy]

@YoDaMa Yes, we need to upgrade the mqtt-packet version. But there are other similar problems, I'm trying to continue to fix them.

[Pavanct]

Is there a workaround for this for time being?

[Pavanct]

The release 4.3.6 still does not solve the issue for React. I am using react 17.0.2, react-scripts 5.0.0, and to build the MQTT js - webpack version 5.6.9. Also, I have tried downgrading the global version of webpack to 4.4, 4.6 - still getting the same error.

[Pavanct]

Using a workaround for React js -

Using Node js 14, Mqtt 4.0.1, react-scripts 4.0.3. This configuration build works even with the webpack latest version 5.6.9.

[yaminagile]

This works for me
https://www.npmjs.com/package/paho-mqtt
which is compatible with all the latest version of react and react-scripts
You don't have to downgrade react, react-script or webpack for that.

[Pavanct]

This works for me https://www.npmjs.com/package/paho-mqtt which is compatible with all the latest version of react and react-scripts You don't have to downgrade react, react-script or webpack for that.

Thank you, But I have tried it. Unable to set TLS certificates for SSL connection to a secure broker.

[ambienthack]

I was able to build mqtt for React following these steps:

inside of node_modules/mqtt create webpack.config.js:

const webpack = require('webpack')

module.exports = {

    entry: "./lib/connect/index.js",

    //mode: "development",

    output: {
        library:  {
            type: "commonjs2"
        },
        filename: "mqtt.browser.js"
    },
    
    plugins: [
        // fix "process is not defined" error:
        // (do "npm install process" before running the build)
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
        new webpack.ProvidePlugin({
            Buffer: [ 'buffer', 'Buffer' ],
        }),
    ],

    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            buffer: require.resolve('buffer'),
            console: require.resolve('console-browserify'),
            constants: require.resolve('constants-browserify'),
            crypto: require.resolve('crypto-browserify'),
            domain: require.resolve('domain-browser'),
            events: require.resolve('events'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            path: require.resolve('path-browserify'),
            punycode: require.resolve('punycode'),
            process: require.resolve('process/browser'),
            querystring: require.resolve('querystring-es3'),
            stream: require.resolve('stream-browserify'),
            string_decoder: require.resolve('string_decoder'),
            sys: require.resolve('util'),
            timers: require.resolve('timers-browserify'),
            tty: require.resolve('tty-browserify'),
            url: require.resolve('url'),
            util: require.resolve('util'),
            vm: require.resolve('vm-browserify'),
            zlib: require.resolve('browserify-zlib'),
        }
    }
}

inside of node_modules/mqtt/package.json

1. add "type": "commonjs" (not sure if this is necessary)
2. under "browser" change ./mqtt.js": "./lib/connect/index.js" to "./mqtt.js": "./dist/mqtt.browser.js"

result:

{
  ...
  "type": "commonjs",
  "browser": {
    "./mqtt.js": "./dist/mqtt.browser.js"
    ...
  }
  ...
}

inside of node_modules/mqtt execute

npm i 
npm i buffer process
npm i webpack webpack-cli
npx webpack

important!!! clean npm cache

delete node_modules/.cache folder

rebuild you app

note: you can consume mqtt this way:

import { connect } from 'mqtt';

[4refr0nt]

I have similar problem for Ionic 6 Angular 13 app. I do not have webpack.config.js.
My temporary fix:
(window as any)['global'] = window; global.Buffer = global.Buffer || require('buffer').Buffer;

[YoDaMa]

if anyone here wants to offer a PR to fix this, it will be welcome.