embroider-build / embroider

Compiling Ember apps into spec-compliant, modern Javascript.
MIT License
339 stars 137 forks source link

Embroider `webpackConfig` does not play well with ember-auto-import configurations #699

Open xg-wang opened 3 years ago

xg-wang commented 3 years ago

The alias for ember-auto-import no longer works when I add embroider

    autoImport: {
      alias: {
        marked: 'marked/lib/marked.esm.js',
      },
    },

I'm seeing this error when ember server --prod, notice the serve works in development env ember serve

Uncaught (in promise) Error: an unsupported module was defined, expected `define(id, deps, module)` instead got: `1` arguments to define`
    at o (loader.js:58)
    at define (loader.js:197)
    at Object.<anonymous> (chunk.6c9d15f03ba3931f58bb.js:1)
    at Object.<anonymous> (chunk.6c9d15f03ba3931f58bb.js:1)
    at i (chunk.c21632eff1cb7b13a230.js:1)
    at Module.<anonymous> (chunk.c21632eff1cb7b13a230.js:1)
    at i (chunk.c21632eff1cb7b13a230.js:1)
    at s.callback (chunk.c21632eff1cb7b13a230.js:1)
    at s.exports (loader.js:106)
    at requireModule (loader.js:27)

Repro branch: https://github.com/xg-wang/ember-realworld/commit/2df8c725dc5915cb2cbd0c2f4f3dcb7ce603bd52#diff-e835654135548f75db36136807171b4d12d3514e043f4f80a146b88cc668fba4R11

I can workaround by passing webpack config, my question is should embroider respect alias or webpack config from e-a-i?

    packagerOptions: {
      webpackConfig: {
        resolve: {
          alias: {
            marked: path.resolve(__dirname, 'node_modules/marked/lib/marked.esm.js'),
          },
        },
      },
    },
xg-wang commented 3 years ago

Looks like https://github.com/embroider-build/embroider/issues/662 is about aliasing app's own js, this issue is about importing 3rd party js

ef4 commented 3 years ago

Probably yes, it would be good for embroider to respect the autoImport options. It would do exactly what you're doing manually here.

jacobq commented 2 years ago

Does anyone else think it would be worthwhile to add a few more details about this in the docs? I worked through a little exercise today of getting a native node module (csv-parse) to work in a default ember 4.x app and then make it work in embroider: https://github.com/jacobq/embroider-csv-parse-test

I found that (1) I basically had to move the ember-auto-import config options over to compatBuild, (2)@embroider/webpack and webpack are not the same -- though I don't really know what the differences are / when to use which except that the former did not have plugins like Webpack.ProvidePlugin, and (3) enabling staticComponents broke the build (presumably because of https://github.com/emberjs/ember-test-helpers/issues/1220).