title: Cannot find module when compiling under Visual Studio
body: <p>I have very simple TypeScript app, which compiles fine using webpack, but gives me an error "Build:Cannot find module 'react'" when trying to build in Visual Studio. I'm stuck, any help is appreciated.</p>
  
  <p>package.json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "react-router-test",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/bundle.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "react": "^15.4.0",
      "react-dom": "^15.4.0",
      "react-router": "^3.0.0"
    },
    "devDependencies": {
      "@types/react": "^0.14.49",
      "@types/react-dom": "^0.14.18",
      "@types/react-router": "^2.0.39",
      "babel-cli": "^6.18.0",
      "babel-core": "^6.18.2",
      "babel-loader": "^6.2.7",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "ts-loader": "^1.2.1",
      "typescript": "^2.0.10",
      "webpack": "^1.13.3"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>webpack.config.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    module.exports = {
      entry: "./src/Index.tsx",
      output: {
          filename: "./dist/bundle.js"
      },
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
      },
  
      module: {
          //loaders: [
          //    { test: /\.tsx$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&amp;presets[]=react!ts-loader' }
  
          loaders: [
              {
                  test: /\.ts(x?)$/,
                  loader: "babel-loader!ts-loader"
              },
          ]
  
      },
  
      devServer: {
          contentBase: ".",
          host: "localhost",
          port: 8081
      },
  
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      },
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>tsconfig.json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "compilerOptions": {
      "noImplicitAny": false,
      "noEmitOnError": true,
      "removeComments": false,
      "sourceMap": true,
      "target": "es6",
      "jsx": "preserve",
      "module": "commonjs"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hello.tsx:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from "react";
  
  interface IHelloProps { compiler: number }
  
  export class Hello extends React.Component&lt;IHelloProps, {}&gt; {
      render() {
          return &lt;div &gt; Hell no 2!&lt;/div &gt;
      }
  }</code></pre>
  </div>
  </div>
  </p>