Webpack build for browser is outdated?

[azerafati]

I followed the steps explained in README

npm install -g webpack // install webpack

cd node_modules/mqtt
npm install . // install dev dependencies
webpack mqtt.js ./browserMqtt.js --output-library mqtt

But that results in an error wanting webpack-cli which after installation gives another error :

ERROR in main
Module not found: Error: Can't resolve 'mqtt.js' in '/home/alireza/Dev/web-customer-panel/node_modules/mqtt'
Did you mean './mqtt.js'?

I tried changing the command to this: webpack ./mqtt.js ./browserMqtt.js --output-library mqtt and the next error:

ERROR in main
Module not found: Error: Can't resolve './browserMqtt.js' in '/home/alireza/Dev/web-customer-panel/node_modules/mqtt'

Do you know any fix for this? I wish you could add this build in dist too which would remove the extra hassle for users.

[pikrog]

Setting ./browserMqtt.js without a preceding flag tells webpack to grab it as another source file. webpack ./mqtt.js -o ./ --output-library mqtt This will generate a main.js file. I have no idea how to set output filename.

[Wifsimster]

I agree, documentation is outdated. I can't get it to work with Webpack 5.

[YoDaMa]

Hi @azerafati, thanks for identifying this issue. Seems like there's been a constant problem with webpack support, and framework support in general.

Do you know a good way to write tests for checking webpack support? It would be a useful step to add to the gate.

[chfritz]

Ran into the same issue. Finally realized that someone had already created a browser-ready package from mqtt.js: https://www.npmjs.com/package/mqtt-browser

npm install mqtt-browser

then in your front-end code:

import mqtt from 'mqtt-browser'; // works

[josvos]

Can't this be solved in the main package? I do not want to rely on third-party packages (for security and maintenance reasons), and this mqtt-browser does not keep up with mqtt.js versions anyway. I'm now doing stuff with aditional buffer/process/url packages (as described by others, somewhere else), but this feels like a dirty hack.

[robertsLando]

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