How to not bundle all moment locales

[urbany]

How can I prevent moment from being imported twice?
I added "moment" to the exclude array and it stopped importing moment because of my app, but it is still importing it because of an addon I use:
my project -> ember-power-calendar -> ember-power-calendar-moment -> moment

I'm using the ember-cli-moment-shim because ember-auto-import imports all the locales and the shim let's me control that, if there is a way to control which locales are imported I might stop using the shim and all will be good

EDIT:
Found other posts about this regarding webpack, this seems to be a way of ignoring the locales but I'm not sure how to do it with e-a-i: moment/moment#1435 (comment)
More info: https://webpack.js.org/plugins/context-replacement-plugin/

Thanks in advance!

[ef4]

Ugh. This thread opens so hopefully with the moment and webpack maintainers trying to work out a solution, and ends so ignominiously with the webpack maintainers closing the issue "because it's not about webpack".

You can certainly use any of the strategies they talk about. I tested moment-locales-webpack-plugin like this and it works:

// in ember-cli-build.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
let app = new EmberApp(defaults, {
  autoImport: {
    webpack: {
      plugins: [
        new MomentLocalesPlugin({
            localesToKeep: ['es-us', 'ru'],
        })
      ]
    }
  }
});

So that provides an immediate solution for your application, but it's unsatisfactory as a good ecosystem-wide solution. I consider it a bug if app authors need to provide webpack-specific config to do normal, common things.

I see two action items here:

1. We need a declarative way to handle this class of common customizations. One that isn't tied to any particular packager's implementation.
2. We should probably get the various shims like ember-cli-moment-shim to themselves switch internally to ember-auto-import, so that if people do end up with both they get proper deduplication. There is a relative issue for for moment in particular here.

[urbany]

@ef4 thank you so much for the quick reply!
I didn't know I could use the plugins like that. I ended up going with this (because I needed a more generic solution to use with other libraries also) and it's working:

// in ember-cli-build.js
const IgnorePlugin = require('webpack').IgnorePlugin;
let app = new EmberApp(defaults, {
  autoImport: {
    alias: {
      'moment-timezone': 'moment-timezone/builds/moment-timezone-with-data-2012-2022.min.js',
    },
    webpack: {
      plugins: [
        new IgnorePlugin(/^\.\/locale$/, /moment$/),
      ]
    }
  }
});

Since we can use the solutions advised by webpack I don't think this is a bug of e-a-i.
Adding this example to the readme might be enough.

Regarding ember-cli-moment-shim it will be easy to use e-a-i internally using the code above as a guide.

@cibernox you might want to add this to your readme also so your calendar users are not loading all locales by default.

@ef4 thank you again for the help!

[ef4]

I do consider it a bug though, because I don't really want @cibernox to need to tell all users of his addon to manually add stuff to the webpack config. We should come up with a convention between ember addons to control this stuff.

I'm also thinking forward to when this kind of capability is built into ember-cli. I see ember-auto-import as a polyfill for eventually building whole ember apps with this kind of automated module resolution.

[urbany]

Maybe the best option would be to make the shim use e-a-i and let it transform the user options for locales and timezones into the proper webpack config.
I created a WIP PR here jasonmit/ember-cli-moment-shim#168

[allthesignals]

I am trying to auto import moment.js, and I'm not sure how to debug this error:

Could not find module _eai_dyn_moment imported from (require)

I tried it with @ef4 locales solution (FWIW, I do not need multiple locales), but still see the same error. Any examples on getting this to work?

Here's some code:

    return import('moment').then(({ default: moment }) => {
      const effective = this.get('effective');

      if (effective) {
        return moment(effective).utc().format('LL');
      }
      return 'To be determined';
    });

I am currently using ember-cli-moment-shim, but I'll try ember-moment to see if that helps smooth over the import.

[NullVoxPopuli]

since this issue was created, ember-moment was iterated on to support modern web standards (use only what you need, etc).
There are some instructions here for adopting the latest ember-moment: https://github.com/adopted-ember-addons/ember-moment#using-momentjs-in-ember-apps--addons

The readme there has a section on how to control what moment brings in: https://github.com/adopted-ember-addons/ember-moment#controlling-locale-and-timezone-data, which aligns with moment's own docs on how to use it with webpack.