Search code examples
ember.jsyarnpkgpackage.json

Does an ember package imported component use its parents library version?

  • I tried to use a component from an imported package inside a class in ember.
  • I expected the component to use its own version of ember-intl.
  • It resulted in the imported package using the parents version of ember-intl.

I have ember-intl 5.7.0 in parent and 4.3.0 used in an imported package.

There is a component called <Calendar> from the imported package used in a parent class which has a string that looks like: "{Date} was selected for <span class='exampleName'".

4.3.0 will handle this string fine but 5.7.0 will fail as the major version change was that apostrophes were made into escape characters :[

node_modules shows that the child package resolves to 4.3.0 but during runtime it fails due to the apostrophe.

The imported component uses a service by injecting it:

import { inject as service } from '@ember/service';

intl: service()

I've added logging to both versions to see which is used and it is the parent version. I would prefer not to downgrade the parent or alter the child library.

Can anyone explain why this is happening?

If any more info is needed, let me know, thanks.

Solution

  • You can only ever have one copy of a package at any given time -- allowing duplicates would explode your bundle size very rapidly (exponentially, even).

    In best case scenarios, the "app version" will win, but in worst case scenarios, you duplicate dependencies in your app -- this can be linted against with ember-cli-dependency-lint

    Because ember-intl relies on app-wide state, tho, it's not possible to get in to duplicate dependencies in your app -- because you can only ever have one copy of a service.

    I recommend upgrading the package you're using, since ember-intl is nearly on v6 right now, and v4 is very old.