Importing does not work

[raj-oeeai]

Hi, I need some help with this Issue. I am trying to upgrade my ember project from 3.28 to 4.4. When I am using 'ember-auto-import' v2.7.1 and 'mqtt' v5.3.4 the project isn't building and throws this error:

ERROR in ../tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/app.cjs 24:68-83 Module not found: Error: Can't resolve 'mqtt' in '/tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack' resolve 'mqtt' in '/tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack' Parsed request is a module No description file found in /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack or above resolve as module looking for modules in /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules single file module No description file found in /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules or above no extension /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt is not a file .js /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt.js doesn't exist .ts /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt.ts doesn't exist .json /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt.json doesn't exist existing directory /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt using description file: /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/package.json (relative path: .) using exports field: ./dist/index.js using description file: /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/package.json (relative path: ./dist/index.js) no extension /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/dist/index.js doesn't exist .js /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/dist/index.js.js doesn't exist .ts /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/dist/index.js.ts doesn't exist .json /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/dist/index.js.json doesn't exist as directory /tmp/broccoli-1kzczpcG70Ypb/cache-532-webpack_bundler_ember_auto_import_webpack/node_modules/mqtt/dist/index.js doesn't exist /tmp/broccoli-1kzczpcG70Ypb/node_modules doesn't exist or is not a directory /tmp/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory

• building... [ember-auto-import-webpack] Build Error (WebpackBundler)

webpack returned errors to ember-auto-import

I was using 'async-mqtt' v2.6.3 with 'ember-auto-import' v1.12.2 before switching to 'mqtt' v5.3.3 with 'ember-auto-import' v2.7.1 . When I use 'mqtt' v5.2.1 the project builds but throws an error that 'mqtt.connect' is not a function.

I tried to import with ' import mqtt from "mqtt"; ' & ' import mqtt* from "mqtt"; ' And i tried to import the connect component with ' import { connect } from "mqtt"; '

[void-mAlex]

could you please put together a reproduction for this issue, thank you

[raj-oeeai]

could you please put together a reproduction for this issue, thank you

1. Create a new Ember 4.4 project
2. npm install mqtt --save-dev
3. Add the following file app/services/demo-service.js

import Service from '@ember/service';
import mqtt from 'mqtt';

export default class DemoService extends Service {
  connect() {
    try {
      const url = 'ws://broker.emqx.io:8083/mqtt';
      const mqttOptions = {
        clean: true,
        connectTimeout: 4000,
        clientId: 'emqx_test',
        username: 'emqx_test',
        password: 'emqx_test',
      };
      this.client = mqtt.connect(url, mqttOptions);
    } catch (error) {
      console.log(error);
    }
  }
}

5. ember serve

error:

webpack returned errors to ember-auto-import
        at WebpackBundler (ember-auto-import-webpack)
-~- created here: -~-
    at new Plugin (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/node_modules/broccoli-plugin/dist/index.js:47:36)
    at new WebpackBundler (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/webpack.js:112:9)
    at AutoImport.makeBundler (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/auto-import.js:110:16)
    at AutoImport.addTo (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/auto-import.js:129:51)
    at Class.postprocessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/index.js:49:55)
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/utilities/addon-process-tree.js:6:25
    at Array.reduce (<anonymous>)
    at addonProcessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/utilities/addon-process-tree.js:4:32)
    at EmberApp.addonPostprocessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/broccoli/ember-app.js:909:12)
    at EmberApp.toTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/broccoli/ember-app.js:1732:17)
    at appInstance.toTree (/Users/raj/Desktop/dev/auto-import/node_modules/@embroider/macros/src/ember-addon-main.js:58:39)
    at module.exports (/Users/raj/Desktop/dev/auto-import/ember-cli-build.js:23:14)
    at Builder.readBuildFile (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:49:14)
    at Builder.setupBroccoliBuilder (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:63:22)
    at new Builder (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:29:10)
    at ServeTask.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/tasks/serve.js:49:7)
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/command.js:238:24
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Class.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/commands/serve.js:106:5)
    at async /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/cli.js:204:32
    at async CLI.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/cli.js:251:14)
    at async module.exports (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/index.js:145:12)
                Error: webpack returned errors to ember-auto-import
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/webpack.js:537:32
    at finalCallback (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:505:17
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.storeBuildDependencies (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:490:11
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/raj/Desktop/dev/auto-import/node_modules/neo-async/async.js:2818:7
    at done (/Users/raj/Desktop/dev/auto-import/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:736:33
    at /Users/raj/Desktop/dev/auto-import/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/raj/Desktop/dev/auto-import/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:191:23)

                    at new Plugin (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/node_modules/broccoli-plugin/dist/index.js:47:36)
    at new WebpackBundler (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/webpack.js:112:9)
    at AutoImport.makeBundler (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/auto-import.js:110:16)
    at AutoImport.addTo (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/auto-import.js:129:51)
    at Class.postprocessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/index.js:49:55)
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/utilities/addon-process-tree.js:6:25
    at Array.reduce (<anonymous>)
    at addonProcessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/utilities/addon-process-tree.js:4:32)
    at EmberApp.addonPostprocessTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/broccoli/ember-app.js:909:12)
    at EmberApp.toTree (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/broccoli/ember-app.js:1732:17)
    at appInstance.toTree (/Users/raj/Desktop/dev/auto-import/node_modules/@embroider/macros/src/ember-addon-main.js:58:39)
    at module.exports (/Users/raj/Desktop/dev/auto-import/ember-cli-build.js:23:14)
    at Builder.readBuildFile (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:49:14)
    at Builder.setupBroccoliBuilder (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:63:22)
    at new Builder (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/builder.js:29:10)
    at ServeTask.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/tasks/serve.js:49:7)
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/models/command.js:238:24
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Class.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/commands/serve.js:106:5)
    at async /Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/cli.js:204:32
    at async CLI.run (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/cli.js:251:14)
    at async module.exports (/Users/raj/Desktop/dev/auto-import/node_modules/ember-cli/lib/cli/index.js:145:12)

                Error: webpack returned errors to ember-auto-import
    at /Users/raj/Desktop/dev/auto-import/node_modules/ember-auto-import/js/webpack.js:537:32
    at finalCallback (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:505:17
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.storeBuildDependencies (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:490:11
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/raj/Desktop/dev/auto-import/node_modules/neo-async/async.js:2818:7
    at done (/Users/raj/Desktop/dev/auto-import/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/raj/Desktop/dev/auto-import/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/raj/Desktop/dev/auto-import/node_modules/webpack/lib/Compiler.js:736:33
    at /Users/raj/Desktop/dev/auto-import/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/raj/Desktop/dev/auto-import/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:191:23)

[raj-oeeai]

Hey @void-mAlex Do you need more information for the reproduction?

[ef4]

mqtt has published a broken package. Its package.json says

"exports": {
    ".": {
      "browser": {
        "import": "./dist/mqtt.esm.js",
        "default": "./dist/index.js"
      },
    },
    "./dist/*": "./dist/*.js",
  },

ember-auto-import consumes libraries via CJS, so it's the browser.default that we're looking at. But the file dist/index.js doesn't exist. It looks like they publish dist/mqtt.js instead.

In this case you can workaround by importing mqtt/dist/mqtt directly, since they do helpfully expose all of dist.

[raj-oeeai]

Thanks, now the project at least builds. But I'm still encountering the following error: TypeError: (0 , _mqtt.connectAsync) is not a function

[ef4]

Try their other dist files, probably the esm one would give you what you expected. I'm guessing the CJS one is being interpreted by the ESM/CJS interop as a single default export.

[raj-oeeai]

I found a solution for this issue, the folllowing steps helped me:

1. import * as mqttjs from "mqtt/dist/mqtt.esm";
2. const client = await mqttjs.default.connectAsync(mqttHost, mqttOptions, false);
3. const subscribed = await client.subscribeAsync(notificationTopic, { qos: 2 });

[hoIIer]

@raj-oeeai just ran into same issue upgrading deps, where my previously working esm import no longer works:

import { connectAsync } from 'mqtt';

The solution you posted works but not ideal.