vite support

[jahnli]

Currently used on vite, node variables such as global are shown to be wrong

Will Vue Vite be supported

[chartinger]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

[Jairos2015]

It works for js environment (Vite + vue3 + mqtt). import * as mqtt from 'mqtt/dist/mqtt.min';

Thank you.

[waytoviva]

declare module 'mqtt/dist/mqtt.min' { import MQTT from 'mqtt' export = MQTT }

It works.Before this, shown "global is not defined"

[YoDaMa]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

@chartinger these are good instructions. Do you know how to test that vite would be supported automatically, i.e. adding it to our Github Actions testing process? If so, we could more formally support vite for this package.

[ReneeDress]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

Great!!! Thanks. It works.

[chenzesam]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

i use this for my project, but i got error mqtt.min.js:1 Uncaught TypeError: n.createConnection is not a function when i use connect api, who can help me?

[chenzesam]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

i use this for my project, but i got error mqtt.min.js:1 Uncaught TypeError: n.createConnection is not a function when i use connect api, who can help me?

oh, this is my error, i send the wrong url argument like htpp:// so mqtt use net to connect...

[nerdyman]

Anyone know of an equivalent workaround for async-mqtt?

[BlakeTheAwesome]

i use this for my project, but i got error mqtt.min.js:1 Uncaught TypeError: n.createConnection is not a function when i use connect api, who can help me?

oh, this is my error, i send the wrong url argument like htpp:// so mqtt use net to connect...

For anyone else running into this, it appears this library always tries to use the node net library when connecting with the mqtt protocol (selected by default if you have an http address). I worked around the issue by connecting with a ws:// protocol and adding an appropriate listener to my broker (mosquitto):

listener 8883
protocol websockets

[icsaba]

i just added resolve: { alias: { mqtt: 'mqtt/dist/mqtt.js', }, }, to my vite config, and it works!

if you are using webtest runner, then add it in the webtest runner config too:

import { fromRollup } from '@web/dev-server-rollup';
import pluginAlias from '@rollup/plugin-alias';

const alias = fromRollup(pluginAlias);
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
  plugins: [
  alias({
    entries: {
      mqtt: '.vite/mqtt.js',
    }
  }),
],
})

after these changes, you can use mqtt: import mqtt from 'mqtt'

note: before running test, you should run the vite optimize command. it could be handy if you have CI/CD pipeline

[shba007]

How to use mqtt in nuxt.js

[donkeylmx]

I not understand why mqtt.min.js:1 Uncaught TypeError: n.createConnection is not a function happened in 4.3.7 version but success in 4.0.1.

[selinp]

Hi, I have the same problem

[bfritscher]

after 4.01 use ws:// or wss:// for your server url not mqtt.

[rogeriocassares]

Hi @everyone and @chartinger !

I could not active tô running your comments usina React.

Please could you help me?

Thanks!

[shba007]

Hi @everyone and @chartinger !

I could not active tô running your comments usina React.

Please could you help me?

Thanks!

Hi @rogeriocassares

1. Install mqtt and precompiled-mqtt using npm or yarn
2. Copy the lib folder from node_modules/mqtt to node_modules/precompiled-mqtt
3. Use import { connect } from "precompiled-mqtt" to use mqtt

This is the easiest way to get started with mqtt. Other possible way is to install mqtt and compile manually. The instructions are given here Webpack Bundling

[onepisYa]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

vite + vue 2.7.10 + ts + pnpm

other than the above ,we can try

pnpm i --save mqtt-packet

[rogeriocassares]

Hey! I am going to try the mqtt-packet!

[timstrasser]

i use this for my project, but i got error mqtt.min.js:1 Uncaught TypeError: n.createConnection is not a function when i use connect api, who can help me?

oh, this is my error, i send the wrong url argument like htpp:// so mqtt use net to connect...

For anyone else running into this, it appears this library always tries to use the node net library when connecting with the mqtt protocol (selected by default if you have an http address). I worked around the issue by connecting with a ws:// protocol and adding an appropriate listener to my broker (mosquitto):

listener 8883
protocol websockets

After doing that, I get ReferenceError: WebSocket is not defined... I'm using NUXT 3.

[FrodoTrash]

any updates on this? Using Nuxt3 gives errors

[touxing]

You can already use this library with these changes to your code (ts):

• Use import * as mqtt from 'mqtt/dist/mqtt.min';
• Add "skipLibCheck": true to your tsconfig.json
• Create a shims-mqtt.d.ts with

  declare module 'mqtt/dist/mqtt.min' {
    import MQTT from 'mqtt'
    export = MQTT
  }
  

It's useful. Thank you!

[robertsLando]

MQTT 5.0.0 BETA is now available! Try it out and give us feedback: npm i mqtt@beta. It may fix your issues

[robertsLando]

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

[setpixel]

@robertsLando With your examples in Vite, it works when you run dev, but it does not work when you run build.

[plugin:vite:resolve] Module "url" has been externalized for browser compatibility, imported by "C:/Users/setpi/Documents/information-display/node_modules/mqtt/build/src/lib/connect/index.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

[robertsLando]

@setpixel Check vite-webpack in examples folder, that example works for both