How can I solve Webpack error using MQTT.js with ReactJS - reactjs

Question

I want to achieve that by clicking on a button in a ReactJS project a MQTTjs handler sends/publishes a message to a broker. MQTT functionality is already tested without React. Im running my React Project on macOS (v11.6.2) with WebStorm (v2021.3).
For solving that I followed the instructions from MQTTjs on Github and NPM. Namely:
npm install -g webpack
npm install mqtt
cd node_modules/mqtt
npm install .
webpack mqtt.js --output-library mqtt
While npm install . throws no errors webpack mqtt.js --output-library mqtt does:
Module not found: Error: Can't resolve 'mqtt.js' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt'
Did you mean './mqtt.js'?
So I tried it again with adding ./: webpack ./mqtt.js --output-library mqtt. This time I don't get any errors but warnings:
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/
I thought 'No errors?! Let's give it a try'.
Edit: I could get rid of the warning with ./node_modules/.bin/webpack ./mqtt.js --mode=development --output-library mqtt
So in one of my JSX files I import mqtt as stated at Github or NPM.
import mqtt from "mqtt"
function App() {
return (
<div>
<p>Test</p>
<div>
)
}
I didn't use the mqtt package already, just imported it. And this throws me an error in console:
and this error in web browser:
Compiled with problems:
ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/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 }
Here are the versions of mqtt and react from package.json:
"mqtt": "^4.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
I then installed buffer with npm install buffer. But then React throws a lot of errors in the browser. I just picked the first one. The others are quite similar and point to the same path /Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/[PACKAGE_NAME]
Compiled with problems:
ERROR in ./node_modules/mqtt/node_modules/debug/src/browser.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/debug/src/browser.js'
The console error changed to:
I appreciate any help and please let me know if I forgot some important information.
Best,
Marco

Answer 1

I too faced the same issue, after lot of research I was able to make it work. So I decided to publish a build version of mqtt#4.3.7 here . So instead of
import mqtt from "mqtt";
import the precompiled-mqtt package
import mqtt from "precompiled-mqtt";
And everything will be same the official mqtt.js