Dynamic import does not work with embroider

[mydea]

I have an app with a dynamic import:

// ember-cli-build.js
let app = new EmberApp(defaults, {
  babel: {
    plugins: [require.resolve('ember-auto-import/babel-plugin')],
  },

  autoImport: {
    alias: {
      'dragula-css': 'dragula/dist/dragula.css',
      'dragula-js': 'dragula/dist/dragula.js',
    },
  },
});

Then in my code:

let dragula = yield ('dragula-js');

Which works fine in classic build. When trying to move to embroider with the minimal setup, I get a runtime error:

Uncaught Error: Could not find module `dragula-js` imported from `(require)`
    at missingModule (loader.js:247)
    at findModule (loader.js:258)
    at requireModule (loader.js:24)
    at eval (dragula-js.js?c2f6:2)
    at Object.../externals/dragula-js.js (chunk.99c5e4eceabb17762cb1.js:17)
    at __webpack_require__ (chunk.c705e3194f86666ac3b3.js:31)
    at Function.__webpack_require__.t (chunk.c705e3194f86666ac3b3.js:98)

I am running:

• ember-auto-import 2.0.2
• ember-source 3.27.5
• embroider 0.43.3

Am I missing something? Or is this a bug?

[ef4]

ember-auto-import doesn't really do anything under embroider, because it's essentially a polyfill for things that embroider does natively.

So you will need to move your autoImport.alias settings into the actual webpack config's resolve.alias instead:

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    webpackConfig: {
      resolve: {
        alias: {
         'dragula-css': 'dragula/dist/dragula.css',
         'dragula-js': 'dragula/dist/dragula.js',
        },
      }
    }
  }
});

As of ember-auto-import 2.0 we made sure autoImport.alias and webpack's resolve.alias behave the same.

[mydea]

Ahh, that makes sense. Maybe it would make sense to add some kind of embroider migration guide to the readme or something like this - I searched for "embroider" but found nothing, so kind of assumed it would continue working the same way. Or maybe even assert/warn if you're running embroider & have some config set for auto-import?

Thanks for the explanation!

[sinankeskin]

Hey @ef4.

How about same issue but addon?

One user reported same exact issue for one of my addon with dynamic imports: https://github.com/sinankeskin/ember-litepicker/issues/321

Is there any option for maybeEmbroider? I couldn’t find here

Thanks.

[sinankeskin]

I forgot ember-cli-build.js was not included to addons. So, with embroider either I should check if app uses embroider change the paths I guess.

[ef4]

It looks like you have already found the right solution here: https://github.com/sinankeskin/ember-litepicker/pull/322/files

Which is to try not to rely on aliasing rules in addons, because the rules aren't necessarily portable across different build systems and environments. It's better when you can make everything resolve normally following the standard NodeJS resolution rules.

[sinankeskin]

Thanks a lot @ef4 Appreciated.