MQTT.js Error while using with React.js

Hello, I have an issue that the library doesn't work with React, I get strange errors. It seems like it needs another package.

ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'
  Parsed request is a module
  using description file: D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\package.json (relative path: ./lib/connect)
    resolve as module
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
      D:\Web\mqtt test\node_modules doesn't exist or is not a directory
      D:\Web\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
 @ ./src/App.js 10:11-26
 @ ./src/index.js 7:0-24 10:33-36

Mar 09 '22 07:03 RamtinPRG

I think it needs url package. You can install it using: npm install url currently I don't have any errors with this one. I hope this is helpful for you if you have the same problem

Mar 09 '22 07:03 RamtinPRG

Hello again :) Another error

Uncaught ReferenceError: Buffer is not defined
    at Object../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-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-packet/mqtt.js (mqtt.js:1:1)
    at Object.options.factory (react refresh:6:1)

Mar 09 '22 07:03 RamtinPRG

Hi

I also get errors when I add the library to my project.

After creating the React app and some components, I followed the steps on the website.

npm install -g webpack                    // Install webpack globally
npm install mqtt                          // Install MQTT library
cd node_modules/mqtt
npm install .                             // Install dev deps at current dir
webpack mqtt.js --output-library mqtt     // Build

// now you can import the library with ES6 import, commonJS not tested

However, on the last step I got this error message: (I run the command inside the Mqtt folder)

assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve 'mqtt.js' in '/Users/user123/dev/project123/node_modules/mqtt'
Did you mean './mqtt.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
resolve 'mqtt.js' in '/Users/user123/dev/project123/node_modules/mqtt'
  Parsed request is a module
  using description file: /Users/user123/dev/project123/node_modules/mqtt/package.json (relative path: .)
    resolve as module
      looking for modules in /Users/user123/dev/project123/node_modules/mqtt/node_modules
        single file module
          using description file: /Users/user123/dev/project123/node_modules/mqtt/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js doesn't exist
            .js
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.js doesn't exist
            .json
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.json doesn't exist
            .wasm
              /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js doesn't exist
      /Users/user123/dev/project123/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/user123/dev/project123/node_modules
        single file module
          using description file: /Users/user123/dev/project123/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/dev/project123/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/dev/project123/node_modules/mqtt.js doesn't exist
      /Users/user123/dev/node_modules doesn't exist or is not a directory
      looking for modules in /Users/user123/node_modules
        single file module
          using description file: /Users/user123/package.json (relative path: ./node_modules/mqtt.js)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/user123/node_modules/mqtt.js.wasm doesn't exist
        /Users/user123/node_modules/mqtt.js doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.70.0 compiled with 1 error and 1 warning in 81 ms

This file /Users/user123/dev/project123/node_modules/mqtt/node_modules/mqtt.js does not actually exists. There are only two folders that start with "mqtt", namely mqtt-connection and mqtt-packet

Do you have any idea what I am doing wrong?

OS: macOS 12.2.1 Node: 16.14.0 NPM: 8.3.1 React: 17.0.2

Cheers

Mar 09 '22 10:03 CodeCook83

Same issues here. Any fixes for it?

Mar 17 '22 17:03 LarsFlieger

I switched to paho-mqtt. Works fine for me out of the box

Mar 17 '22 17:03 CodeCook83

@CodeCook83 It's probably a typo with the doc. You should try with webpack ./mqtt.js --output-library mqtt inside the folder "mqtt" in your node_modules.

But, just to let you know, i still got the error "Buffer is not defined".

Mar 26 '22 15:03 msalafia

Hey lots of struggle since 5 6 hours trying to build the mqtt to use with react. so why do we need this command to run and build? All other package comes ready to use. Please make some work around. I am not able to use it with webpack 5. Else please tell us how to compile with older webpack or just share the bundled file.

npm install -g webpack                    // Install webpack globally
npm install mqtt                          // Install MQTT library
cd node_modules/mqtt
npm install .                             // Install dev deps at current dir
webpack mqtt.js --output-library mqtt     // Build

just frustrated with this error "Buffer is not defined" then "process is not defined"

Apr 02 '22 16:04 ashiqdey

Hello, I have an issue that the library doesn't work with React, I get strange errors. It seems like it needs another package.

ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
resolve 'url' in 'D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect'
  Parsed request is a module
  using description file: D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\package.json (relative path: ./lib/connect)
    resolve as module
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\connect\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\lib\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\mqtt\node_modules doesn't exist or is not a directory
      D:\Web\mqtt test\mqtt-web-client\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
      D:\Web\mqtt test\node_modules doesn't exist or is not a directory
      D:\Web\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Web\mqtt test\mqtt-web-client\node_modules
        single file module
          using description file: D:\Web\mqtt test\mqtt-web-client\package.json (relative path: ./node_modules/url)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Web\mqtt test\mqtt-web-client\node_modules\url.jsx doesn't exist
        D:\Web\mqtt test\mqtt-web-client\node_modules\url doesn't exist
 @ ./src/App.js 10:11-26
 @ ./src/index.js 7:0-24 10:33-36

Hey I have published a build version of [email protected] , so instead of using mqtt we can use precompiled-mqtt for react and other frontend libraries.

Apr 04 '22 07:04 ashiqdey

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add: resolve: { fallback: { url: require.resolve("url/"), }, }

but then we still get the buffer error: Uncaught ReferenceError: Buffer is not defined at Object../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-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-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

Apr 05 '22 12:04 vinters768

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add: resolve: { fallback: { url: require.resolve("url/"), }, }

but then we still get the buffer error: Uncaught ReferenceError: Buffer is not defined at Object../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-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-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

can you give this package a try. It is the exact same version of [email protected] which will solve all the issues we face in building with webpack

Apr 05 '22 13:04 ashiqdey

#1020

Apr 28 '22 15:04 SignDawn

to resolve Can't resolve 'url' issue: npm install url --save or yarn add url and in your webpack.config.js add: resolve: { fallback: { url: require.resolve("url/"), }, } but then we still get the buffer error: Uncaught ReferenceError: Buffer is not defined at Object../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-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-packet/mqtt.js (mqtt.js:1:1) at Object.options.factory (react refresh:6:1)

can you give this package a try. It is the exact same version of [email protected] which will solve all the issues we face in building with webpack

Had the same issue, and using this package worked for me - thanks!

Oct 06 '22 09:10 ueberf

This is still a problem, even after either installing url and buffer, as well as adding the webpack config as described at https://viglucci.io/how-to-polyfill-buffer-with-webpack-5 as ./webpack.config.js and selecting that in the IDE as the webpack configuration file.

Trying to move off Paho as it does not yet support MQTT 5.0

Environment:

macOS 12.6
pyCharm 2022.2.3

[email protected] [email protected]

$ npm list -g /usr/local/lib └── [email protected]

$ npm list [email protected] /Volumes/miniup-users/jeff/devel/react-2022-11 ├── @testing-library/[email protected] ├── @testing-library/[email protected] ├── @testing-library/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Nov 17 '22 21:11 jeffsf

can you give this package a try. It is the exact same version of [email protected] which will solve all the issues we face in building with webpack

can you give this package a try. It is the exact same version of [email protected] which will solve all the issues we face in building with webpack

Nov 18 '22 05:11 ashiqdey

Could be fixed by https://github.com/mqttjs/MQTT.js/pull/1571

Jun 23 '23 14:06 robertsLando

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

Jul 21 '23 14:07 robertsLando

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

Jul 31 '23 15:07 robertsLando