(lazy) Injection causes 'undefined'/'Cannot access '{InjectableService}' before initialization' error

[marwalsch]

I need property injection for a React project. However, even the most basic example won't work and causes the injected Property to be undefined. I tried inversify-react-decorators but the configuration causes another, even more confusing error.

SomeService.ts

import { inject, injectable } from "inversify";
import { TYPES, ITokenProvider, IFileService } from "../injectables";
import { lazyInject, DIContainer } from "../inversify.config";

export class SomeService {

    @inject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider;
    //@lazyInject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider;   //either of these
     (...)
}

inversify.config.ts

import "reflect-metadata";
import { Container } from "inversify";
import getDecorators from "inversify-inject-decorators";

import { TYPES, ITokenProvider, } from "./injectables";
import { TokenProvider } from "./Services/TokenProvider"


const DIContainer = new Container();
DIContainer.bind<ITokenProvider>(TYPES.ITokenProvider).toConstructor(TokenProvider);


const { lazyInject } = getDecorators(DIContainer, false);

export { DIContainer, lazyInject }

injectables.ts

export interface ITokenProvider {
    getSomeToken(): Promise<string>
}

TokenProvider.ts

import "reflect-metadata";
import * as microsoftTeams from "@microsoft/teams-js";

import { injectable } from "inversify";
import { ITokenProvider } from '../injectables';

@injectable()
export class TokenProvider implements ITokenProvider {

    public constructor() { }

    public async getSomeToken(): Promise<string> {
        (...)
    }
}

Current Behavior

Neither Solution is working.

Using @inject causes

SomeService.ts:35 Uncaught (in promise) TypeError: Cannot read property 'getSomeToken' of undefined
   at
   (...)

Using @lazyInject causes

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)
   (...)

Which is really mind boggling as I couldn't fin anything at all on this. Initializing "TokenService" in the constructor though an explicit call works as expected, so it doesn't seem to be an syntactical issue;

Environment

tsconfig.json

{
  "include": [
    "src/*"
  ],
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": [ "reflect-metadata" ]
  }
}

Versions: inversify": "^5.0.5", inversify-inject-decorators": "^3.1.0",

[notaphplover]

Hi @marwalsch, the class SomeService should be injectable, it should be injected in the DI container and should be initialized through the DI container. Is that the case?

[marwalsch]

Sorry for the late response. I am closing at is has not been relevant anymore by then.

[liangyuqi]

Hi @marwalsch, the class SomeService should be injectable, it should be injected in the DI container and should be initialized through the DI container. Is that the case?

hello，i had the same case，how to reslove it

[LucaSorvillo]

Same problem, has anyone solved it?

[marwalsch]

Re-opening on behalf of those with the same issue.

[mehdico]

Same!

[notaphplover]

For those who have the issue, please submit a recreation of the bug via reproduction repo, codesandbox or any similar platform. We cannot fix bugs without recreating them