ReferenceError: Buffer is not defined ReactJS #1412

yaminagile · 2022-02-04T17:39:53Z

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.

The text was updated successfully, but these errors were encountered:

flyfishzy · 2022-02-09T08:19:07Z

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

YoDaMa · 2022-02-10T16:53:37Z

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

flyfishzy · 2022-02-14T03:13:54Z

@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 · 2022-02-17T12:34:11Z

Is there a workaround for this for time being?

Pavanct · 2022-02-18T11:21:15Z

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 · 2022-02-18T11:23:25Z

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 · 2022-02-18T11:27:15Z

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 · 2022-02-18T11:32:49Z

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 · 2022-02-21T00:56:18Z

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`

add "type": "commonjs" (not sure if this is necessary)
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 · 2022-02-26T10:32:25Z

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 · 2022-03-01T17:48:25Z

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

ashiqdey · 2022-04-02T17:29:20Z

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`

add "type": "commonjs" (not sure if this is necessary)
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';

After crawling the web for 5 6 hours i didnt find any working solution you saved me man. God bless you

ozgurSULUM · 2022-04-17T19:56:58Z

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`

add "type": "commonjs" (not sure if this is necessary)
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';

This worked for me( ty ), I got error because there was no mqtt.browser.js file , instead there was "./dist/mqtt.js" so I configure package.json like "./mqtt.js": "./dist/mqtt.js" and at the end ./dist/mqtt.browser.js was created so I changed my package.json back to "./dist/mqtt.browser.js" and it worked.

ashiqdey · 2022-04-22T13:24:22Z

I would suggest to use this package instead No need to compile just install and use, Its a build version of mqtt@4.3.7. can be used with react and other frontend libraries

rem4ik4ever · 2022-07-22T01:51:22Z

Hey, I also have this issue. Does anyone have a solution that does not require webpack changes?

rem4ik4ever · 2022-07-22T01:51:49Z

I would suggest to use this package instead No need to compile just install and use, Its a build version of mqtt@4.3.7. can be used with react and other frontend libraries

This package is lacking type definitions and doesn't work well in typescript project.

kesler20 · 2022-07-24T16:39:01Z

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`

add "type": "commonjs" (not sure if this is necessary)
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';

Hello you saved my PhD I love you thanks

doc-han · 2022-07-24T17:37:31Z

So if you're using MQTT for the web(mostly react). Your import should be like below

import mqtt from "mqtt/dist/mqtt";

And if you're using typescript, you need to add the below in a global type's definition or create an mqtt.d.ts and add the below

declare module "mqtt/dist/mqtt" {
    import MQTT from "mqtt"
    export = MQTT
}

remember to include the types file in include array of your tsconfig.json

doc-han · 2022-07-24T17:39:24Z

Hey, I also have this issue. Does anyone have a solution that does not require webpack changes?

Check the solution I just provided whether it works for you. Works for my team!
we built with create-react-app and didn't want to eject. Hence, don't want to mess up with webpack configurations

ouedyan · 2022-08-01T12:24:25Z

So if you're using MQTT for the web(mostly react). Your import should be like below
import mqtt from "mqtt/dist/mqtt";
And if you're using typescript, you need to add the below in a global type's definition or create an mqtt.d.ts and add the below
declare module "mqtt/dist/mqtt" {
    import MQTT from "mqtt"
    export = MQTT
}
remember to include the types file in include array of your tsconfig.json

Works perfectly ! Thanks !

awootton · 2022-10-30T08:13:03Z

I got the webpack technique to work but then it later broke. It's like they really don't want us to use mqtt in a browser so they don't fix it. I use precompiled-mqtt now (https://www.npmjs.com/package/precompiled-mqtt)

fabiradi · 2023-01-11T13:46:27Z

👍🏻 Importing from mqtt/dist/mqtt incl. type definitions is by far the best solution for my case (see #1412 (comment)).

No additional package to be loaded.
No messing around in node_modules, that may not be repeatable easily.
No need to "rewire" create-react-app.
When used as a library, the fix is applied

FerrariAndrea · 2023-02-09T12:09:09Z

Thank you, you save me, I had a react app, that was using:
"react-scripts": "^4.0.3" and "mqtt": "^4.1.0",
after updating to "react-scripts": "^5.0.1" and "mqtt": "^4.3.7",
I was receiving this error, I fixed just by changing the import of the dependencies as you suggested!
import mqtt from "mqtt/dist/mqtt"; instead of import mqtt from "mqtt";
Now it work :)

ccvca · 2023-03-29T06:06:11Z

Another quick hack, without any deep config changes. Just add this to your index.html:

<script type="module">
  import { Buffer } from 'buffer';
  window.Buffer = Buffer;
</script>

mainak-shil · 2023-04-10T17:45:35Z

checkout this solution need to install precompiled-mqtt which is a wrapper of mqtt base package where you don't need to perform bundle related extra works

https://stackoverflow.com/a/75979346/8243241

robertsLando · 2023-06-23T14:54:46Z

Could be fixed by #1571

robertsLando · 2023-07-21T14:47:10Z

MQTT 5.0.0 BETA is now available! Try it out and give us feedback: npm i mqtt@beta. It may fix your issues

robertsLando · 2023-07-31T15:05:05Z

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

flyfishzy mentioned this issue Feb 9, 2022

fix: buffer is not defined in browser mqttjs/mqtt-packet#128

Merged

YoDaMa self-assigned this Feb 10, 2022

flyfishzy mentioned this issue Feb 14, 2022

fix: buffer is not defined in browser #1420

Merged

ichanol mentioned this issue Mar 27, 2022

Patch webpack 5 #1463

Closed

msalafia mentioned this issue Mar 28, 2022

creat-react-app@5.0.0 run mqtt fail #1370

Closed

doc-han mentioned this issue Aug 3, 2022

Buffer is not defined #1294

Closed

jenschr mentioned this issue Jan 10, 2023

Uncaught ReferenceError: Buffer is not defined VictorHAS/mqtt-react-hooks#74

Open

fabioimpe mentioned this issue Jan 17, 2023

IS_BROWSER fails when application is not built/served by Webpack #1570

Closed

Frabat mentioned this issue Mar 17, 2023

Buffer is not defined mqttjs/async-mqtt#55

Open

simonmysun mentioned this issue Apr 10, 2023

Unable to resolve module url from `node_modules/mqtt/lib/connect/index.js #1020

Closed

vishnureddy17 unassigned YoDaMa May 1, 2023

liusong1111 mentioned this issue May 9, 2023

ReferenceError: Buffer is not defined #1604

Closed

wasdee mentioned this issue May 26, 2023

When importing MQTT to a Vue3 project, I get the following error: #1596

Closed

Eddy-Ko mentioned this issue Jul 31, 2023

MQTT v5 Feedbacks #1639

Closed

robertsLando closed this as completed Jul 31, 2023

jsb04 mentioned this issue Aug 19, 2023

MQTT 5 issue #1675

Closed

ReferenceError: Buffer is not defined ReactJS #1412

ReferenceError: Buffer is not defined ReactJS #1412

Comments

yaminagile commented Feb 4, 2022

flyfishzy commented Feb 9, 2022

YoDaMa commented Feb 10, 2022

flyfishzy commented Feb 14, 2022

Pavanct commented Feb 17, 2022

Pavanct commented Feb 18, 2022

Pavanct commented Feb 18, 2022 • edited Loading

yaminagile commented Feb 18, 2022

Pavanct commented Feb 18, 2022

ambienthack commented Feb 21, 2022 • edited Loading

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

inside of node_modules/mqtt/package.json

inside of node_modules/mqtt execute

important!!! clean npm cache

rebuild you app

4refr0nt commented Feb 26, 2022

YoDaMa commented Mar 1, 2022

ashiqdey commented Apr 2, 2022

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

inside of node_modules/mqtt/package.json

inside of node_modules/mqtt execute

important!!! clean npm cache

rebuild you app

ozgurSULUM commented Apr 17, 2022 • edited Loading

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

inside of node_modules/mqtt/package.json

inside of node_modules/mqtt execute

important!!! clean npm cache

rebuild you app

ashiqdey commented Apr 22, 2022

rem4ik4ever commented Jul 22, 2022

rem4ik4ever commented Jul 22, 2022

kesler20 commented Jul 24, 2022

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

inside of node_modules/mqtt/package.json

inside of node_modules/mqtt execute

important!!! clean npm cache

rebuild you app

doc-han commented Jul 24, 2022

doc-han commented Jul 24, 2022

ouedyan commented Aug 1, 2022

awootton commented Oct 30, 2022

fabiradi commented Jan 11, 2023

FerrariAndrea commented Feb 9, 2023

ccvca commented Mar 29, 2023

mainak-shil commented Apr 10, 2023

robertsLando commented Jun 23, 2023

robertsLando commented Jul 21, 2023

robertsLando commented Jul 31, 2023

Pavanct commented Feb 18, 2022 •

edited

Loading

ambienthack commented Feb 21, 2022 •

edited

Loading

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

inside of `node_modules/mqtt/package.json`

inside of `node_modules/mqtt` execute

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

inside of `node_modules/mqtt/package.json`

inside of `node_modules/mqtt` execute

ozgurSULUM commented Apr 17, 2022 •

edited

Loading

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

inside of `node_modules/mqtt/package.json`

inside of `node_modules/mqtt` execute

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

inside of `node_modules/mqtt/package.json`

inside of `node_modules/mqtt` execute