[Bug]: 'Failed to resolve entry for package "mqtt".' when using in Vite + React

[TomasHubelbauer]

Client version

2.9.1

Node version

v21.0.0

Operating System type

Mac OS X

Operating system version

Sonoma 14.2.1

Describe the bug

Hi, I believe this is a problem with the mqtt dependency rather than this package directly, but I would still like to bring it to your attention in case I am wrong and this is something that can be fixed in this package itself.

mqttjs/MQTT.js#1769

It seems to me that because that package has a misconfigured default export type, issues arise when attempting to use this package in Vite + React because of ESM incompatibility.

This can be easily reproduced by creating a new Vite + React project using npm create vite@latest my-react-app --template react and installing this package, then running it with this line in the source code: import { EufySecurity } from 'eufy-security-client'.

Feel free to close if this is indeed a dependency issues and nothing can be done to fix the issue here.

To reproduce

1. npm create vite@latest my-react-app --template react
2. npm i eufy-security-client
3. import { EufySecurity } from 'eufy-security-client' in App.jsx
4. npm run dev

Screenshots & Logfiles

✘ [ERROR] Failed to resolve entry for package "mqtt". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

    node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:1374:21:
      1374 │         let result = await callback({
           ╵                      ^

    at packageEntryFailure (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:29450:17)
    at resolvePackageEntry (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:29447:5)
    at tryNodeResolve (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:29217:20)
    at Context.resolveId (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:28985:28)
    at Object.resolveId (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:63629:64)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:67637:21
    at async file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:41080:34
    at async requestCallbacks.on-resolve (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:1374:22)
    at async handleRequest (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:732:11)

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:1293:20:
      1293 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:41060:19)
    at handlePlugins (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:1293:21)
    at buildOrContextImpl (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:979:5)
    at Object.buildOrContext (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:788:5)
    at /Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:2223:68
    at new Promise (<anonymous>)
    at Object.context (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:2223:27)
    at Object.context (/Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild/lib/main.js:2048:58)
    at prepareEsbuildOptimizerRun (file:///Users/tom/Desktop/eufy-doorbell-snapshotter/node_modules/.pnpm/vite@5.0.10/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:65419:35)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/.pnpm/eufy-security-client@2.9.1/node_modules/eufy-security-client/build/mqtt/service.js:27:34:
      27 │ const mqtt = __importStar(require("mqtt"));
         ╵                                   ~~~~~~

Additional context

No response

[bropat]

In the next version (3.0.0) the mqtt library has been updated to the latest available version. Once I have released the new version, you can try again. Hopefully the problem has been fixed on the mqtt site, otherwise you will need to open an issue there related to this issue.

[TomasHubelbauer]

@bropat I have opened an issue with mqtt and it is linked in this ticket, I think it is a legitimate issue on their end, but I will still try with 3.0.0 just in case and report back here once you've released it and I've had a chance to try it.

[TomasHubelbauer]

FWIW the new mqqt version did not fix the issue. Looks like it won't work until mqttjs/MQTT.js#1769 gets fixed. It is something with how that library uses ESM and how Vite loads it.