title: Inversify cannot inject class with dependencies
body: <p>I started a new typescript project based an old project of mime (which started as plain javascript) and I can't get any non-trivial injection working. I know about nothing about babel configuration (because of staring with create-react-app). I tried <a href="https://github.com/inversify/InversifyJS#installation" rel="nofollow noreferrer">the recommended compilerOptions</a> and it didn't work either..... my setup may be a mess, but that's how it evolved.</p>
  
  <p>Feel free to get the whole project from <a href="https://github.com/Maaartinus/inversify-problem" rel="nofollow noreferrer">github</a> (get it and run <code>npm install &amp;&amp; npm start</code>) or continue reading.</p>
  
  <pre><code>import 'reflect-metadata';
  import { Container } from 'inversify';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { injectable } from 'inversify';
  
  @injectable()
  export class Simple {
  }
  
  @injectable()
  export class Composed {
      simple: Simple;
  
      // ERROR: Module parse failed: Unexpected character '@'
      // constructor(@inject simple: Simple) {
      //  this.simple = simple;
      // }
  
      // Error: Missing required @inject or @multiInject annotation in: argument 0 in class Composed.
      constructor(simple: Simple) {
          this.simple = simple;
      }
  }
  
  const container = new Container();
  container.bind(Simple).toSelf();
  container.bind(Composed).toSelf();
  console.log(container.get(Composed));
  
  function Main() {
      return &lt;div&gt;
          {JSON.stringify(container.get(Composed))}
      &lt;/div&gt;;
  }
  
  ReactDOM.render(&lt;Main/&gt;, document.getElementById('root'));
  </code></pre>
  
  <h3>package.json</h3>
  
  <pre><code>{
      "name": "inversify-problem",
      "version": "0.0.1",
      "description": "",
      "private": true,
      "dependencies": {
          "@material-ui/core": "^4.9.8",
          "@material-ui/icons": "^4.9.1",
          "array.prototype.flatmap": "^1.2.3",
          "customize-cra": "^0.9.1",
          "deep-equal": "^2.0.1",
          "eslint": "^6.8.0",
          "inversify": "^5.0.1",
          "json-stable-stringify": "^1.0.1",
          "mobx": "^5.15.4",
          "mobx-decorators": "^6.0.1",
          "mobx-react": "^6.1.8",
          "mobx-state-tree": "^3.15.0",
          "notistack": "^0.9.9",
          "react": "^16.13.1",
          "react-app-polyfill": "^1.0.6",
          "react-app-rewire-mobx": "^1.0.9",
          "react-app-rewired": "^2.1.5",
          "react-dom": "^16.13.1",
          "reflect-metadata": "^0.1.13",
          "resize-observer-polyfill": "^1.5.1",
          "shallowequal": "^1.1.0",
          "styled-components": "^5.0.1",
          "ts-enum-util": "^4.0.1"
      },
      "devDependencies": {
          "babel-plugin-import": "^1.13.0",
          "babel-plugin-styled-components": "^1.10.7",
          "@types/classnames": "^2.2.10",
          "@types/deep-equal": "^1.0.1",
          "@types/json-stable-stringify": "^1.0.32",
          "@types/jest": "^25.1.4",
          "@types/node": "^13.9.8",
          "@types/react": "^16.9.29",
          "@types/react-dom": "^16.9.5",
          "eslint-plugin-unused-imports": "^0.1.2",
          "tslint-etc": "^1.10.1",
          "react-scripts": "^3.4.1",
          "typescript": "^3.8.3"
      },
      "scripts": {
          "start": "react-app-rewired start",
          "build": "react-app-rewired build",
          "test": "react-app-rewired test",
          "eslint": "eslint --fix $(find src -name '*.ts' -o  -name '*.tsx')",
          "eject": "react-scripts eject"
      },
      "eslintConfig": {
          "extends": "react-app",
          "parserOptions": {
              "ecmaFeatures": {
                  "legacyDecorators": true
              }
          }
      },
      "browserslist": [
          "&gt;0.2%",
          "not dead",
          "not ie &lt;= 11",
          "not op_mini all"
      ]
  }
  </code></pre>
  
  <h3>tsconfig.json</h3>
  
  <pre><code>{
      "compilerOptions": {
          "target": "ES5",
          "sourceMap": true,
          "downlevelIteration": true,
          "importHelpers": true,
          "lib": [
              "dom",
              "dom.iterable",
              "esnext",
              "es6",
              "webworker",
              "es2015.collection",
              "es2015.iterable",
              "es2019"
          ],
          "types": [
              "node",
              "reflect-metadata"
          ],
          "allowJs": false,
          "skipLibCheck": true,
          "esModuleInterop": true,
          "allowSyntheticDefaultImports": true,
          "strict": true,
          "strictNullChecks": true,
          "forceConsistentCasingInFileNames": true,
          "module": "esnext",
          "moduleResolution": "node",
          "resolveJsonModule": true,
          "isolatedModules": true,
          "experimentalDecorators": true,
          "emitDecoratorMetadata": true,
          "noImplicitAny": true,
          "noEmitOnError": false,
          "incremental": false,
          "jsx": "preserve",
          "noEmit": true
      },
      "include": [
          "src/index.tsx",
          "src/mg/extras.d.ts"
      ]
  }
  </code></pre>
  
  <h3>config-overrides.js</h3>
  
  <pre><code>const {
      override,
  } = require("customize-cra");
  
  module.exports = override(
  );
  </code></pre>
  
  <h1>Debugging</h1>
  
  <p>I tried to debug the problem, but found not much out. There are no metadata, no attempt is made to parse Function.prototype.toString() like in <a href="https://stackoverflow.com/a/9924463/581205">this answer</a>. There's something wrong with my configuration, but that thing is pretty opaque to me.</p>