svelte / mqtt

[vtimofeev01]

Hello!

I am trying to use mqtt with svelte, but after installed global i can't call import mqtt from 'mqtt' ni var mqtt = require('mqtt') please help how to use it togather Thank U

error msg:

bundles src/main.js → public/build/bundle.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
url (imported by node_modules/mqtt/lib/connect/index.js, node_modules/mqtt/lib/connect/ws.js, url?commonjs-external)
events (imported by node_modules/mqtt/lib/client.js, events?commonjs-external, node_modules/mqtt-packet/parser.js, node_modules/mqtt-packet/generate.js)
buffer (imported by node_modules/safe-buffer/index.js, buffer?commonjs-external)
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at '/home/imt/area_overwatch/LocalImgEventInterface/node_modules/buffer/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
[!] Error: Could not load /home/imt/area_overwatch/LocalImgEventInterface/node_modules/es5-ext/array/index.js#/clear (imported by node_modules/es6-map/polyfill.js): ENOENT: no such file or directory, open '/home/imt/area_overwatch/LocalImgEventInterface/node_modules/es5-ext/array/index.js#/clear'
Error: Could not load /home/imt/area_overwatch/LocalImgEventInterface/node_modules/es5-ext/array/index.js#/clear (imported by node_modules/es6-map/polyfill.js): ENOENT: no such file or directory, open '/home/imt/area_overwatch/LocalImgEventInterface/node_modules/es5-ext/array/index.js#/clear'

AB#8757115

[nosovk]

To use like that you have to provide nodejs shims for mqttjs. In above example you are not importing browserify build, you are compiling the whole library with rollup. Currently rollup does not provide shims in default config (in comparison to webpack prior to v5). You may add them and try to build library. Or you can require browserify build, which is already published in npm. const mqtt = require('mqtt/dist/mqtt.min.js') but it's in commonjs format, you also certainly will need to tune rollup for commonjs modules.

[vtimofeev01]

tune rollup for commonjs modules. please help what U mean on it

<script>
    import mqtt from 'mqtt/dist/mqtt.js'
    let server = 'mqtt://127.0.0.1'
    let client = mqtt.connect(server)
    client.subscribe('area_ov')
    client.on('message', function (topic, message) {
      console.log(topic)
      console.log(message)
    })
</script>

<h1>bbbbb!</h1>

Uncaught TypeError: net.createConnection is not a function streamBuilder mqtt.js:1736 wrapper mqtt.js:2537 _setupStream mqtt.js:300 MqttClient mqtt.js:279 connect mqtt.js:2539 instance App.svelte:4 init index.mjs:1461 App bundle.js:15269 app main.js:3 <anonymous> bundle.js:15286 Thank U

[nosovk]

@vtimofeev01 added PR, which moves svelte-mqtt-monitor to bundled mqtt instead of external dep. Check branch from PR to see working example.

[chartinger]

In addition to the changes in the PR: If you are using typescript you can create a shims-mqtt.d.ts with

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

to still have auto completion and satisfy noImplicitAny = true.

[github-actions[bot]]

This is an automated message to let you know that this issue has gone 365 days without any activity. In order to ensure that we work on issues that still matter, this issue will be closed in 14 days.

If this issue is still important, you can simply comment with a "bump" to keep it open.

Thank you for your contribution.

[nosovk]

We were able to use bundled version of MQTT.js with Svelte and Rollup that time, but in new project with SvelteKit we moved to https://www.npmjs.com/package/u8-mqtt (there was question above https://github.com/mqttjs/MQTT.js/issues/1346 about Kit also) I suggest closing an issue now.

[TheTrueCoder]

I have got a solution to getting MQTT.js working in SvelteKit. It is outlined here: https://github.com/mqttjs/MQTT.js/issues/1346#issuecomment-1345832609

[robertsLando]

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