Invalid @Inject Decorator declaration on property

[jhd-lego]

I seem to be hitting an error when I am trying to inject a property on my class.

export class ADFSRepository extends AuthFacade {
  @Inject
  private readonly dataSource: ADALDataSource
}

The injected value is bound, it is an abstract class, and it works perfectly fine if I force the Inject declaration to always go to the property declaration here

typescript-ioc/src/decorators.ts

Lines 149 to 150 in 623a58a

	if (args.length === 2 || (args.length === 3 && typeof args[2] === 'undefined')) {
	return InjectPropertyDecorator.apply(this, args);

The issue seems to be that my args is an array of length 3, where the third argument is an object.

0: AuthFacade {constructor: ƒ, signInWithUsername: ƒ}
1: "dataSource"
2: {configurable: true, enumerable: true, writable: true, initializer: null}
length: 3

[aopanasenko]

The same issue

[danielgelling]

Same issue here 😞 . Any solutions/workarounds?

[InsOpDe]

Looks like youre not using ts-node (or ts-jest) to execute the code.

This could be related to evanw/esbuild#412
and
#77

[AvetisSargsian]

Hi,
I have the same issue, and I did some experiments.
@Inject is not working when the project is compiled with create-react-app (babel...)
but if I use pure ts project created with webpack-cli (ts-loader) without babel it works fine.

I have also found some suggestions to add some bubel plugins such as:
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
but it doesn't help in my case.

[SimoneGianni]

Documentation says that when injecting on a property 2 arguments are given, the class and the property name, and also explains why that is the case IN TYPESCRIPT:
https://www.typescriptlang.org/docs/handbook/decorators.html#property-decorators

However, it looks like other interpreters are able to pass also the third parameter. So, to support both cases, the check in decorators.ts line 149 should be different:

if (args.length === 3 && typeof args[2] === 'number') {
  return InjectParamDecorator.apply(this, args);
} else if (args.length >= 2) {
  return InjectPropertyDecorator.apply(this, args);
}
// Case for decorator on a class
throw new TypeError('Invalid @Inject Decorator declaration.');

It would still be missing the case of the decorator used on a method, but would work in react.