binding: error invoking show when using aurelia-i18n with webpack

I’m not sure if this issue is related to aurelia binding, templating or i18n. Sorry if I posted it in the wrong repository.

Considering that I’m using the latest version of es2016-skeletonproject-webpack, If I install the aurelia-i18n following the instructions in the docs, I can’t use show.bind anymore.

For example:

Download skeleton project
Install packages npm install
Install aurelia-i18n npm install aurelia-i18n --save

Let’s say this is my main.js:

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
        backend: {                                  // <-- configure backend settings
          loadPath: '/locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
        },
        lng : 'de',
        attributes : ['t','i18n'],
        fallbackLng : 'en',
        debug : false
      });
    });

  aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

This line import {I18N} from 'aurelia-i18n'; is not necessary, but it’s listed in the docs.

Now, if I use a show.bind, like this:

<div class="page-host" show.bind="isVisible">
  <router-view></router-view>
</div>

I get the following error:

Unhandled rejection Error: Error invoking Show. Check the inner error for details.
------------------------------------------------
inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

This error doesn’t happen if I remove the import {I18N} from 'aurelia-i18n';. The plugin still works, however.

This works normally with SystemJS.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 39 (30 by maintainers)

Most upvoted comments

Autoject shouldn.t call anything. Whole point is to get the types for the DI from the constructor. Anything inherited should be ignored. similarly using autoinject together with an own inject array or function doesn.t make any sense.

doktordirk on May 26, 2018

mentioned PR has been merged. That was clearly an oversight by me, as most other parts of the I18N plugin do request injects exactly as proposed. It’s merged and should be released soon

zewa666 on Apr 21, 2018

I think I’d agree with @niieani . Though platform specific code must run before all else otherwise DOM.Element will often be resolved before its value gets assigned by specific PAL code, which is undefined. This is not always obvious why it wouldn’t work, and this could be sometimes barrier for newcomer. Illustrated via following block for anyone wanting to know what happened:

class T {
  // will be undefined if PAL code was not run before this
  static inject = [DOM.Element]
  
  // will be fine, regardless the PAL code evaluation order
  static inject() {
    return [DOM.Element];
  }
}

Fix at https://github.com/aurelia/i18n/pull/266

@EisenbergEffect @zewa666

bigopon on Apr 21, 2018

@omnipresentminded @RomkeVdMeulen Since you are saying the problem occurred after updates see aurelia/templating-resources#267 for more info.

StrahilKazlachev on Dec 16, 2016