InversifyJS: property injection not working in React

Just found this issue while trying to solve the same problem for project using babel with plugin-proposal-decorators (legacy mode). My workaround is to define own decorators which exploit babel’s internal initializer (can read about it here) descriptor property to settle down prototype lookup:

const DECORATORS = getDecorators(myContainer);

interface IBabelPropertyDescriptor extends PropertyDescriptor {
  initializer(): any;
}

export const injectProperty = function(serviceIdentifier: interfaces.ServiceIdentifier<any>) {
  const original = DECORATORS.lazyInject(serviceIdentifier);
  // the 'descriptor' parameter is actually always defined for class fields for Babel, but is considered undefined for TSC
  // so we just hack it with ?/! combination to avoid "TS1240: Unable to resolve signature of property decorator when called as an expression"
  return function(this: any, proto: any, key: string, descriptor?: IBabelPropertyDescriptor): void {
    // make it work as usual
    original.call(this, proto, key);
    // return link to proto, so own value wont be 'undefined' after component's creation
    descriptor!.initializer = function() {
      return proto[key];
    };
  };
};
// same overrides go for other 3 lazy* decorators

Usage:

export class MyClassWithInjection extends React.Component<IMyProps, IMyState> {
  // here we recieve TS1240 error, if didn't use ?/! hack
  @injectProperty(foo) private _foo!: IFoo;
  //...
  private _invokeSomethingOnFoo = () => {
    this._foo.bar();
  };
}

Any update on this? Workarounds actually not working for us…

Use a workaround to make the inject work.

class Game extends React.Component {
  gameService: GameService = container.get(GameService);
}

In this week I started to learn about inversify with React too and I’m having the same issue… I got the basic example of https://github.com/inversify/inversify-inject-decorators and just pasted it on a new class in my project, just to test, and even the basic example was not working.

I was looking in the implementation, trying to find some guess of what was happening… This library (if I didnt get wrong) inject the properties on the prototype of the object, so the injection works only when you do a get on the property of prototype.

When you do a get on the object, the js will look at the instance to see if the property exists there. If it doesnt then Js will look at the instance’s prototype chain until get the value wanted.

The problem is that when you create a instance (new WhateverClass()) all properties will be in your instance, so js will never do a search on the prototype chain and, because of that, your instance will never be injected.

To exemplify what I’m talking about I got the basic example I said above and made some changes. That’s an example of what is happening here:

@dcavanagh and @remojansen, Do you have some guess about what is happening here?

import "reflect-metadata"

import getDecorators from "inversify-inject-decorators";
import { Container, injectable, tagged, named } from "inversify";

let container = new Container();
let { lazyInject } = getDecorators(container);
let TYPES = { Weapon: "Weapon" };

interface Weapon {
    name: string;
    durability: number;
    use(): void;
}

@injectable()
class Sword implements Weapon {
    public name: string;
    public durability: number;
    public constructor() {
        this.durability = 100;
        this.name = "Sword";
    }
    public use() {
        this.durability = this.durability - 10;
    }
}

class Warrior {
    constructor(){}
    @lazyInject(TYPES.Weapon)
    weapon: Weapon;
}

container.bind<Weapon>(TYPES.Weapon).to(Sword);

let warrior = new Warrior();
console.log(warrior.weapon instanceof Sword); // false

delete warrior.weapon

console.log(warrior.weapon instanceof Sword); // true

export default warrior```

As far as I know, it’s caused by @babel/plugin-proposal-class-properties.

The code above was compiled to something like:

class Game extends React.Component {
  constructor() {
     // This is why the injection broken.
     this.gameService = undefined;
  }
}