Addon breaks without mirage installed

[seanCodes]

Without miragejs installed as a dependency I get the error

Uncaught (in promise) Error: Could not find module `miragejs` imported from `ember-file-upload`

This seems similar to #926. miragejs is listed as an optional peer dependency but the compiled artifact output requires it.

Perhaps moving mirage-related logic to a separate addon as suggested in #641 would be the best fix? Until then the docs should probably include miragejs as one of the required dependencies.

[gilest]

Hi @seanCodes thanks for reporting.

Could you please provide some additional details:

• The full stack trace of the error
• Which package manager your project is using
• Which version of ember-auto-import your project is using
• Is your project using embroider or regular ember-cli?

For reference demo app in this repository ("website" package) does not have mirage installed and it is building ok. It's hosted here: https://ember-file-upload.pages.dev/

[seanCodes]

Oh interesting about the demo app… I can try setting up a reduced test case app to try and reproduce.

Here’s the requested info:

• Stack trace:

  Uncaught Error: Could not find module `miragejs` imported from `ember-file-upload`

  missingModule                        @  loader.js:247
  findModule                           @  loader.js:258
  Module.findDeps                      @  loader.js:168
  findModule                           @  loader.js:262
  Module.findDeps                      @  loader.js:168
  findModule                           @  loader.js:262
  Module.findDeps                      @  loader.js:168
  findModule                           @  loader.js:262
  requireModule                        @  loader.js:24
  get                                  @  index.js:25
  _extractDefaultExport                @  index.js:377
  resolveOther                         @  index.js:139
  resolve                              @  index.js:160
  resolve                              @  index.js:764
  resolve                              @  index.js:522
  resolve                              @  index.js:524
  factoryFor                           @  index.js:237
  instantiateFactory                   @  index.js:280
  lookup                               @  index.js:230
  lookup                               @  index.js:125
  lookup                               @  container_proxy.js:19
  (anonymous)                          @  index-test.js:9
  runTest                              @  qunit.js:465
  run                                  @  qunit.js:463
  eval                                 @  qunit.js:507
  processTaskQueue                     @  qunit.js:390
  advanceTaskQueue                     @  qunit.js:384
  advance                              @  qunit.js:382
  eval                                 @  qunit.js:593
  setTimeout (async)
  internalStart                        @  qunit.js:593
  release                              @  qunit.js:577
  resolve                              @  qunit.js:578
  Promise.then (async)
  resolvePromise                       @  qunit.js:578
  callHook                             @  qunit.js:467
  runHook                              @  qunit.js:469
  processTaskQueue                     @  qunit.js:390
  eval                                 @  qunit.js:390
  Promise.then (async)
  processTaskQueue                     @  qunit.js:390
  eval                                 @  qunit.js:390
  Promise.then (async)
  processTaskQueue                     @  qunit.js:390
  advanceTaskQueue                     @  qunit.js:384
  advance                              @  qunit.js:382
  advanceTestQueue                     @  qunit.js:392
  advance                              @  qunit.js:382
  unblockAndAdvanceQueue               @  qunit.js:753
  Promise.then (async)
  begin                                @  qunit.js:761
  eval                                 @  qunit.js:753
  setTimeout (async)
  scheduleBegin                        @  qunit.js:753
  load                                 @  qunit.js:752
  load (async)
  addEvent                             @  qunit.js:854
  eval                                 @  qunit.js:946
  eval                                 @  qunit.js:965
  eval                                 @  qunit.js:1262
  ./node_modules/qunit/qunit/qunit.js  @  chunk.vendors-node_m…f6d8615fbac6.js:149
  __webpack_require__                  @  chunk.app.0e94c41….js:239
  eval                                 @  app.cjs:21
  Module.exports                       @  loader.js:106
  Module._reify                        @  loader.js:143
  Module.reify                         @  loader.js:130
  Module.exports                       @  loader.js:104
  Module._reify                        @  loader.js:143
  Module.reify                         @  loader.js:130
  Module.exports                       @  loader.js:104
  Module._reify                        @  loader.js:143
  Module.reify                         @  loader.js:130
  Module.exports                       @  loader.js:104
  requireModule                        @  loader.js:27
  (anonymous)                          @  tests-suffix.js:1
  

  (This is while running tests)

• npm

• [email protected]

• Regular ember-cli, no Embroider

I’m also on ember-file-upload 8.0.0, ember-source 4.12.0, webpack 5.82.1 and node 16.20.0, if that helps.

[seanCodes]

Hey @gilest, I’m not sure what the website/ app may be doing differently, but I was able to create a reduced test case demonstrating the issue here: https://github.com/seanCodes/ember-file-upload-bug-demo. It's a fresh Ember app with only controllers/application.js added. It looks like just import { UploadFile } from 'ember-file-upload' in the controller is able to trigger the error.

[gilest]

Found time to investigate today.

This is an open issue with the handling of optional peer dependencies by ember-auto-import introduced in v2.6.2 issue ref: embroider-build/ember-auto-import/issues/578

Until that issue is fixed there are a few options for a workaround:

• Keep your installed version of ember-auto-import <= v2.6.1
• Add the following patch to ember-cli-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const webpack = require('webpack');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        plugins: new webpack.IgnorePlugin({
          // workaround for https://github.com/embroider-build/ember-auto-import/issues/578
          resourceRegExp: /miragejs/,
        }),
      },
    },
    // Add options here
  });

Thanks again for reporting, and providing a reproduction. I'll leave this issue open for visibility until the ember-auto-import issue is resolved.

[gilest]

Both embroider-build/ember-auto-import/issues/578 and embroider-build/embroider/pull/1468 have been closed

Please check ensure you're using@embroider/macros >= 1.11.1