title: Can't get property dependency injection to work in React project
body: <p>I need some really basic dependency injection for a react project in a similar syntactical manner as in C# or Java. Using context or injection through props is not an option. I tried three solutions so far:</p>
  <ul>
  <li><a href="https://github.com/inversify" rel="nofollow noreferrer">Inversify</a></li>
  <li><a href="https://github.com/inversify/inversify-inject-decorators" rel="nofollow noreferrer">Inversify-React-Decorators</a></li>
  <li><a href="https://github.com/RobinBuschmann/react.di" rel="nofollow noreferrer">React.DI</a></li>
  </ul>
  <p>However, none of theses solutions worked, which raised the questions if there is some sort of configuration issue.</p>
  <p><strong>Using Inversify / Inversify-React-Decorators / Rect.DI</strong></p>
  <p>SomeService.ts</p>
  <pre><code>import { inject, injectable } from &quot;inversify&quot;;
  import { TYPES, ITokenProvider, IFileService } from &quot;../injectables&quot;;
  import { lazyInject, DIContainer } from &quot;../inversify.config&quot;;
  
  export class SomeService {
  
      @inject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider;      //Inversify
      //@lazyInject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider;//Inversify-r-d
      //@Inject tokenProvider!: TokenProvider;                                   //react-di
       (...)
  }
  </code></pre>
  <p>inversify.config.ts</p>
  <pre><code>import &quot;reflect-metadata&quot;;
  import { Container } from &quot;inversify&quot;;
  import getDecorators from &quot;inversify-inject-decorators&quot;;
  
  import { TYPES, ITokenProvider, } from &quot;./injectables&quot;;
  import { TokenProvider } from &quot;./Services/TokenProvider&quot;
  
  
  const DIContainer = new Container();
  DIContainer.bind&lt;ITokenProvider&gt;(TYPES.ITokenProvider).toConstructor(TokenProvider);
  
  
  const { lazyInject } = getDecorators(DIContainer, false);
  
  export { DIContainer, lazyInject }
  </code></pre>
  <p>injectables.ts</p>
  <pre><code>export interface ITokenProvider {
      getSomeToken(): Promise&lt;string&gt;
  }
  </code></pre>
  <p>TokenProvider.ts</p>
  <pre><code>import &quot;reflect-metadata&quot;;
  import * as microsoftTeams from &quot;@microsoft/teams-js&quot;;
  
  import { injectable } from &quot;inversify&quot;;
  import { ITokenProvider } from '../injectables';
  
  @injectable()
  export class TokenProvider implements ITokenProvider {
  
      public constructor() { }
  
      public async getSomeToken(): Promise&lt;string&gt; {
          (...)
      }
  }
  </code></pre>
  <p>App.tsx (used by react-di instead of inversify.config)</p>
  <pre><code>@Module({
      providers: [
          { provide: AccessTokenProvider, useClass: AccessTokenProvider },
      ]
  })
  </code></pre>
  <p><strong>Errors</strong></p>
  <p>React-DI and Inversify won'r resolve the dependency, causing an undefined error for the property.
  Inversify decorators causes following error:</p>
  <pre><code>TokenProvider.ts:8 Uncaught ReferenceError: Cannot access 'SomeService' before initialization
      at Module.SomeService (VM8 main.chunk.js:248)
      at Module../src/inversify.config.ts (inversify.config.ts:11)
     (...)
  </code></pre>
  <p><strong>Config</strong></p>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;include&quot;: [
      &quot;src/*&quot;
    ],
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;emitDecoratorMetadata&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;types&quot;: [ &quot;reflect-metadata&quot; ]
    }
  }
  </code></pre>
  <p>I also tried moving the <code>&quot;reflect-metadata&quot;</code> around different classes.</p>