Skip to content

Instantly share code, notes, and snippets.

Created August 12, 2022 09:13
What would you like to do?
Fix mqtt.js for use in React and Webpack 5
#!/usr/bin/env bash
set -e
cd node_modules/mqtt
cat > webpack.config.js << EOF
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'),
sed -i '' 's/"\.\/mqtt\.js": "\.\/lib\/connect\/index\.js"/"\.\/mqtt\.js": "\.\/dist\/mqtt\.js"/g' ./package.json
npm i
npm i buffer process
npm i webpack webpack-cli
npx webpack
sed -i '' 's/"\.\/mqtt\.js": "\.\/dist\/mqtt\.js"/"\.\/mqtt\.js": "\.\/dist\/mqtt\.browser\.js"/g' ./package.json
rm -rf ../.cache
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment