"Missing required @inject or @multiInject annotation" even though it's there

[christianblos]

Hey, I have the problem that I can't get the injects working. It always says Missing required @inject or @multiInject annotation. Event though I add this annotation it still complains (I don't have a circular dependency either).

Expected Behavior

Injection should work.

Current Behavior

I'm trying to get inversify working together with the latest create-react-app. Unfortunately no inject is working like expected. I took a really small example to reproduce this issue:

Steps to Reproduce (for bugs)

1. create-react-app test --typescript
2. cd test
3. yarn add inversify reflect-metadata
4. update tsconfig.json:

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

5. replace whole content of src/index.tsx:

import {Container, injectable, inject} from 'inversify';
import 'reflect-metadata';

let container: Container = new Container();

const KatanaType: symbol = Symbol();
const ShurikenType: symbol = Symbol();
const NinjaType: symbol = Symbol();

@injectable()
class Katana {
    public hit() {
        return 'cut!';
    }
}

@injectable()
class Shuriken {
    public throw() {
        return 'hit!';
    }
}

@injectable()
class Ninja {

    public constructor(
        @inject(KatanaType) private katana: Katana,
        @inject(ShurikenType) private shuriken: Shuriken,
    ) {
    }

    public fight() {
        return this.katana.hit();
    }

    public sneak() {
        return this.shuriken.throw();
    }

}

container.bind<Katana>(KatanaType).to(Katana).inSingletonScope();
container.bind<Shuriken>(ShurikenType).to(Shuriken).inSingletonScope();
container.bind<Ninja>(NinjaType).to(Ninja).inSingletonScope();

container.get(NinjaType);

6. run yarn start
7. See error "Error: Missing required @Inject or @multiInject annotation in: argument 0 in class Ninja.
   ".

Environment

Node version: v10.11.0
create-react-app version: 2.1.1

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "23.3.9",
    "@types/node": "10.12.10",
    "@types/react": "16.7.7",
    "@types/react-dom": "16.0.10",
    "inversify": "^5.0.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "reflect-metadata": "^0.1.12",
    "typescript": "3.1.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I'm not sure if I have a wrong configuration somewhere or if this is a problem in create-react-app. I appreciate your help :)

[Laazarus]

I am having the same problem with my test project,
I cannot get the inject working with react.
I am not getting any error when I run the application but simply I get the injected service is always undefined.
Best Regards

[Roustalski]

I created a demo repo of this for ease of reproducing.

https://github.com/Roustalski/broken-inversify

[projekt86]

@Roustalski try to remove constructor and use property injection. I create PR to your repo.

[mrdulin]

same issue.

Missing required @Inject or @multiInject annotation in: argument 0 in class xxx

[michalzubkowicz]

I can confirm that issue, also that @projekt86 workaround works. Do you have any idea what is cause of this?

[hamstakilla]

if you using index.ts, and import multiple classes from it, get rid of it.
helped me.

[csr632]

maybe related to babel: #1007

[albertocorrales]

Do you know if there is a solution for this issue? I'm using CRA and @Inject decorator works without constructors, as @projekt86 suggested, but I would like to be able to use constructors in my typescript classes, as I was doing before installing inversify

[csr632]

@albertocorrales Use tsc or tsloader to transform ts into js if you can. If you must use babel, add this plugin.
See this for more info.

[albertocorrales]

@csr632, thanks for your answer. I would like to continue using babel, as we have some plugins there to build our bundle. However, I tried to configure the babel plugin and I'm still having the runtime error:

Error: Missing required @Inject or @multiInject annotation in: argument 0 in class Ninja.

Here I forked @Roustalski 's repo to configure babel plugin. I'm not sure if I'm missing something or it is just not working:
https://github.com/albertocorrales/broken-inversify

[kegi]

Here is how I fixed it (almost fixed it) on my React (CRA) project :

I didn't wanted to eject so I added react-app-rewired (https://github.com/timarney/react-app-rewired)
I added babel-plugin-parameter-decorator (https://github.com/WarnerHooh/babel-plugin-parameter-decorator)

Here is the steps to configure react :

1. yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators babel-plugin-parameter-decorator
2. On package.json (scripts), replace "react-scripts" by "react-app-rewired"
3. Create "config-overrides.js" at project root

config-overrides.js :

const { override, addDecoratorsLegacy, addBabelPlugin } = require('customize-cra')

module.exports = override(
    addDecoratorsLegacy(),
    addBabelPlugin('babel-plugin-parameter-decorator'),
)

Now, everything is working as expected and I can @Inject() in constructor.
Well... it's working only on dev react-app-rewired start but when I build it with react-app-rewired build, I have that error on the browser console : ReferenceError: inject is not defined

I feel I'm close to fix this, anyone have a clue ?

[NicholasKuchiniski]

Same issue here. I cannot get a class from a container if this class contains a constructor that receive an argument.