InversifyJS: I can't get this work with my current TypeScript 2.3 project

I would love to use this in my project. But it seems to blow up when im trying to install it

• I am using webpack
• I have TypeScript 2.3
• I am using react
• My @Types folder is inside a top level node_modules@Types folder

And this is where the types that I EXCPLICTITY installed via command line like npm install --save @types/react live

My setup that works

So before I installed Inversify 2.0, everything was working very well.

I had this tsconfig.json file

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "es2015",
    "target": "es5",
    "jsx": "react",
    "types" : ["jquery", "lodash", "react", "react-dom"]
  },
    "include": [
        "./src/**/*"
    ]
}

And this package.json

  "name": "task1webpackconfig",
  "version": "1.0.0",
  "description": "webpack 2 + TypeScript 2 + Babel example",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sachabarber/MadCapIdea.git"
  },
  "keywords": [
    "babel",
    "typescript",
    "webpack",
    "bundling",
    "javascript",
    "npm"
  ],
  "author": "sacha barber",
  "homepage": "https://github.com/sachabarber/MadCapIdea#readme",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.5.4",
    "webpack": "^2.5.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "@types/jquery": "^2.0.43",
    "@types/lodash": "^4.14.63",
    "@types/react": "^15.0.24",
    "@types/react-dom": "^15.5.0",
    "awesome-typescript-loader": "^3.1.3",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "on-build-webpack": "^0.1.0",
    "sass-loader": "^6.0.3",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.3.2",
    "webpack": "^2.4.1"
  },
  "scripts": {
    "build-dev": "webpack -d --config webpack.develop.js",
    "build-prod": "webpack --config webpack.production.js"
  }
}

So then I followed instructions here : https://github.com/inversify/InversifyJS#installation

So for me that meant doing the following

1. Installing : npm install inversify reflect-metadata --save
2. Adding/modofying the following to my tsconfig.json file

lib": ["es6"],
"types": ["reflect-metadata"],
"module": "commonjs",
"experimentalDecorators": true,
"emitDecoratorMetadata": true

As I say my setup has a top level node_modules folder with @Types inside it. After installing inversify I Don’t see any additional types added in the node_modules@Types folder , even though I believe inversify (The InversifyJS type definitions are included in the inversify npm package.)

So when I then run this new setup. I get a tonne of errors from the webpack command line.

Loads of line starting with this sort of thing error in [at-loader]

My setup was working without these changes for inversify, although I should point out that it is not able to find typing information for installed types for other things either, it does however work completely fine at runtime.

I have raised a StackOverflow for that : http://stackoverflow.com/questions/43789778/webpack-typescript-react-module-not-found

I should point out I am new to Typescript/Webpack, but any help would be greatly appreciated