MQTT.js does not work with Webpack 5.x

[massi-ang]

Webpack 5.x removed the Nodejs polyfills (see facebook/create-react-app#12072), including Buffer. Since MQTTjs depends on mqtt-packets which uses Buffer it cannot be used with Webpack 5.x following the instructions provided in the doc.

Please fix removing dependency on Buffer to make the library compatible with Webpack 5.x without requiring polyfills, or update the documentation accordingly.

[viliket]

You can use the following workaround (tested to work with the latest react-scripts 5.0.1 used in create-react-app) when using Webpack >= 5 which no longer provides the Node.js polyfills needed by MQTT.js:

1. Install the buffer and process as normal dependencies:

   npm i buffer process
   

2. Create a new file like mqtt-patch.ts with the following contents:

   import buffer from 'buffer';
   import process from 'process';
   
   // Hack to get mqtt package work with Webpack 5
   (window as any).Buffer = buffer.Buffer;
   (window as any).process = process;
   
   export {};
   

3. Import the above file before anything else inside your "root" module (in Create React App index.tsx):

   import './mqtt-patch'; // First import
   // Other imports as usual
   

4. After this you should be able to use MQTT.js as usual with Webpack >= 5.

[Nosferatu31]

/mqtt/lib/connect/index.js also depends on url which has to be polyfilled

[MarcinSzalomski]

The alternative to the answer of @viliket would be to load the polyfills via webpack instead of importing them from a file.
Additionaly, mqtt suggests the webpack alternative as we can see in the console prompt.

1. Install buffer, process and url (since it also needs to be polyfilled - just like @Nosferatu31 suggested).
   npm install buffer process url

2. Edit your webpack.config.js with following snippets

module.exports = {
   ...
   plugins: [
      new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
      new webpack.ProvidePlugin({ process: 'process' }),
      new webpack.ProvidePlugin({ url: 'url' }),
   ]
   ...
   resolve: {
      fallback: {
         buffer: require.resolve('buffer/'),
         url: require.resolve('url/'),
         process: require.resolve('process/'),
      }
   }
}

[zarte]

You can use the following workaround (tested to work with the latest react-scripts 5.0.1 used in create-react-app) when using Webpack >= 5 which no longer provides the Node.js polyfills needed by MQTT.js:

1. Install the buffer and process as normal dependencies:

   npm i buffer process
   

2. Create a new file like mqtt-patch.ts with the following contents:

   import buffer from 'buffer';
   import process from 'process';
   
   // Hack to get mqtt package work with Webpack 5
   (window as any).Buffer = buffer.Buffer;
   (window as any).process = process;
   
   export {};
   

3. Import the above file before anything else inside your "root" module (in Create React App index.tsx):

   import './mqtt-patch'; // First import
   // Other imports as usual
   

4. After this you should be able to use MQTT.js as usual with Webpack >= 5.

cannot read properties of undefined (reading 'Buffer')
had npm i buffer

[robertsLando]

Please consider opening a PR to fix this issue

[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

[Nosferatu31]

@robertsLando I get a:

Uncaught ReferenceError: process is not defined

js client.ts:42
factory react refresh:6

[robertsLando]

@Nosferatu31 https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined ?

Also instead of importing mqtt module you could try importing the minified version: import mqtt from 'mqtt/dist/mqtt.min'

[Nosferatu31]

Since I am using CRA, I did not want to eject it to configure the Webpack configuration file...

[dvkam]

CRA is de facto not maintaned anymore.

See for context, the React documentation removed CRA as it is not longer recommended to start a react project this way and some reasoning behind this to read here reactjs/react.dev#5487 (comment)
It is completely removed from the docs.

If you are keen to move to a similar setup I can recommend the React Vite template. Depending on how big your project is the switch can be pretty straightforward. And there you just configure the vite config.

But if you want to stay with CRA and do not want to eject, I am not sure if there is a solution. (my guess is no)

[robertsLando]

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

[robertsLando]

FYI starting from 5.2.1 you can now import mqtt in browser using:

import mqtt from 'mqtt'

[Nosferatu31]

@robertsLando I think that my issue with CRA was solved with 5.2.1, thank you!