Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Nov 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd64438
fix: correctly handle browser imports
robertsLando Nov 10, 2023
a4f19ed
fix: remove module entry
robertsLando Nov 10, 2023
b4b074e
fix: browser test make them use default import
robertsLando Nov 10, 2023
7b4fd44
docs: update docs
robertsLando Nov 10, 2023
4f767ed
docs: fix version
robertsLando Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions .airtap.yml
View file
Open in desktop

This file was deleted.

36 changes: 11 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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'
Expand All @@ -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
Expand Down
6 changes: 4 additions & 2 deletions examples/vite-example/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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([])

Expand Down
55 changes: 55 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 10 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion test/browser/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }*/
Expand Down