fix: make import mqtt from 'mqtt' work in browsers (#1734)

Author: robertsLando

.airtap.yml

@@ -801,6 +801,8 @@ The callback is called when the packet has been removed.
 Closes the Store.
 
 <a name="browser"></a>
+<a name="webpack"></a>
+<a name="vite"></a>
 
 ## Browser
 
@@ -812,7 +814,15 @@ You can find all mqtt bundles versions in `dist` folder:
 - `mqtt.min.js` - iife format, minified
 - `mqtt.esm.js` - esm format minified
 
-In order to import them use one of the following:
+Starting from MQTT.js > 5.2.0 you can import mqtt in your code like this:
+
+```js
+import mqtt from 'mqtt'
+```
+
+This will be automatically handled by your bundler.
+
+Otherwise you can choose to use a specific bundle like:
 
 ```js
 import * as mqtt from 'mqtt/dist/mqtt'
@@ -830,30 +840,6 @@ See <http://unpkg.com> for the full documentation on version ranges.
 
 **Be sure to only use this bundle with `ws` or `wss` URLs in the browser. Others URL types will likey fail**
 
-<a name="webpack"></a>
-
-### Webpack
-
-If you are using webpack simply import MQTT.js in one of the following ways:
-
-```js
-import * as mqtt from 'mqtt/dist/mqtt'
-import * as mqtt from 'mqtt/dist/mqtt.min'
-import mqtt from 'mqtt/dist/mqtt.esm'
-```
-
-<a name="vite"></a>
-
-### Vite
-
-If you are using vite simply import MQTT.js like this:
-
-```js
-import * as mqtt from 'mqtt/dist/mqtt'
-import * as mqtt from 'mqtt/dist/mqtt.min'
-import mqtt from 'mqtt/dist/mqtt.esm'
-```
-
 <a name="qos"></a>
 
 ## About QoS

README.md

@@ -1,10 +1,12 @@
 <script setup>
 import { ref } from 'vue'
-import { connect } from 'mqtt/dist/mqtt.min'
+import mqtt from 'mqtt'
+
+console.log('mqtt', mqtt)
 
 const connected = ref(false)
 
-const client = connect('wss://test.mosquitto.org:8081');
+const client = mqtt.connect('wss://test.mosquitto.org:8081');
 
 const messages = ref([])
 

examples/vite-example/src/App.vue

@@ -21,6 +21,7 @@
     "url": "git://github.com/mqttjs/MQTT.js.git"
   },
   "main": "./build/mqtt.js",
+  "module": "./dist/mqtt.esm.js",
   "bin": {
     "mqtt_pub": "./build/bin/pub.js",
     "mqtt_sub": "./build/bin/sub.js",
@@ -35,7 +36,13 @@
     "src/"
   ],
   "exports": {
-    ".": "./build/mqtt.js",
+    ".": {
+      "browser": {
+        "import": "./dist/mqtt.esm.js", 
+        "default": "./dist/mqtt.js"
+      },
+      "default": "./build/mqtt.js"
+    },
     "./package.json": "./package.json",
     "./*.map": "./build/*.js.map",
     "./dist/*": "./dist/*.js",
@@ -95,7 +102,7 @@
     "node": ">=16.0.0"
   },
   "browser": {
-    "./mqtt.js": "./build/mqtt.js",
+    "./mqtt.js": "./dist/mqtt.js",
     "fs": false,
     "tls": false,
     "net": false
@@ -110,6 +117,7 @@
     "help-me": "^4.2.0",
     "lru-cache": "^10.0.1",
     "minimist": "^1.2.8",
+    "mqtt": "^5.2.0",
     "mqtt-packet": "^9.0.0",
     "number-allocator": "^1.0.14",
     "readable-stream": "^4.4.2",

package-lock.json

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import mqtt from '../../dist/mqtt.esm.js';
+import mqtt from '../../'; // this will resolve to mqtt/dist/mqtt.esm.js
 
 // needed to test no-esm version /dist/mqtt.js
 /** @type { import('../../src/mqtt').MqttClient }*/