Uncaught TypeError: this.backend[fcName] is not a function

[stefan505]

I'm unable to get aurelia-i18n@0.5.3 working using JSPM. I'm following the very latest docs, it fails during bootstrapping phase:

BackendConnector.js:213 Uncaught TypeError: this.backend[fcName] is not a function

The code snippet from the eval script where its failing is here:

Connector.prototype.read = function read(lng, ns, fcName, tried, wait, callback) {
    var _this4 = this;
    if (!tried)
      tried = 0;
    if (!wait)
      wait = 250;
    if (!lng.length)
      return callback(null, {});
    this.backend[fcName](lng, ns, function(err, data) {       <----------  HERE
      if (err && data && tried < 5) {
        setTimeout(function() {
          _this4.read.call(_this4, lng, ns, fcName, ++tried, wait * 2, callback);
        }, wait);
        return;
      }
      callback(err, data);
    });
  };

My main.ts file plugin load:

    // aurelia-i18n
    aurelia.use.plugin('aurelia-i18n', (instance) =>
    {
        // register backend plugin
        instance.i18next.use(Backend);

        // adapt options to your needs (see http://i18next.com/docs/options/)
        // make sure to return the promise of the setup method, in order to guarantee proper loading
        return instance.setup({
            backend: {                                  // <-- configure backend settings
                loadPath: '/locale/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
            },
            lng: 'af-ZA',
            attributes: ['t', 'i18n'],
            fallbackLng: 'en-ZA',
            debug: true,
            saveMissing: true
        });
    });

JSPM dependencies:

    "dependencies": {
      "SignalR/bower-signalr": "github:SignalR/bower-signalr@^2.2.0",
      "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0-beta.1.2.1",
      "aurelia-dialog": "npm:aurelia-dialog@^0.6.1",
      "aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0-beta.1.2.5",
      "aurelia-i18n": "npm:aurelia-i18n@^0.5.3",
      "aurelia-kendoui-bridge": "npm:aurelia-kendoui-bridge@^0.10.3",
      "aurelia-validatejs": "npm:aurelia-validatejs@^0.3.1",
      "aurelia-validation": "npm:aurelia-validation@^0.8.1",
      "bootstrap": "github:twbs/bootstrap@^3.3.6",
      "css": "github:systemjs/plugin-css@^0.1.21",
      "fetch": "github:github/fetch@^1.0.0",
      "font-awesome": "npm:font-awesome@^4.6.1",
      "i18next-xhr-backend": "npm:i18next-xhr-backend@^0.5.4",
      "icheck": "github:fronteed/iCheck@^1.0.2",
      "jquery": "npm:jquery@^2.2.3",
      "jquery-slimscroll": "npm:jquery-slimscroll@^1.3.6",
      "jquery-validation": "github:jzaefferer/jquery-validation@^1.15.0",
      "jquery-validation-unobtrusive": "github:aspnet/jquery-validation-unobtrusive@^3.2.6",
      "kendo-ui": "kendo:bower-kendo-ui@^2016.1.420",
      "moment": "npm:moment@^2.13.0",
      "multiplexjs": "npm:multiplexjs@^1.0.0",
      "nprogress": "github:rstacruz/nprogress@^0.2.0",
      "text": "github:systemjs/plugin-text@^0.0.7",
      "toastr": "github:CodeSeven/toastr@^2.1.2"
    }

[stefan505]

It seems following docs caused this issue. Changed from import * as Backend from "i18next-xhr-backend to import Backend from "i18next-xhr-backend in main.ts got it working.

[Souldrinker]

...or rather the issue seemed to be that the readme file incorrectly suggested us TypeScript users:

// if you use TypeScript
// import * as Backend from 'i18next-xhr-backend';

...which doesn't seem to be the case (at least not in VS2015 with TypeScript 1.8.6.0). If it's imported as:

import Backend from 'i18next-xhr-backend';

...it seems to work just fine.

[zewa666]

Oh man, TypeScript is driving me nuts. We have currently about 3 issues regarding the same topic, so I don't clearly see whats the way forward. I agree, the one time I tested it with TypeScript myself the proposal of @Souldrinker worked. I guess it might be related to the TypeScript version installed.
So any ideas how to go on with this?

[stefan505]

I'm using TS 1.8, perhaps the docs need to mention the TS syntax options for TS versions that will handle it differently?

[Souldrinker]

As I mentioned in the referenced issue I think it's not only a TS version issue but also a question of whether you're outputting to ES5 or ES6 and not only what TS version you're using. That is if you output to ES6 you should use the normal ES6 syntax, but if you're outputting to ES5 you have to either do import * as Foo from "foo" or import Foo = require("foo").

If I get it correctly pre-TS1.8 (and also in 1.8 if outputting to ES5) you have to use one of the two old ways of doing it, while in TS1.8+ targetting ES6+ things works as expected (=like in ES6).
microsoft/TypeScript#5285

[zewa666]

@Souldrinker what would really help is if you can provide a PR updating the README and as now just simply describe the different scenarios, so that people using whichever version know what the root cause is and therefore can adapt appropriately.

[Souldrinker]

Well, I'm not really sure what to type to explain this in a good way, but maybe it would be enough if you just change the comment in point 7 to something like:

// if you use TypeScript and target ES5 (or use a version prior to 1.8) and get errors similar to this.backend[c] is not a function you might need to change your import to this
// import * as Backend from 'i18next-xhr-backend';

[EisenbergEffect]

Closing this as a dupe.