WebPack TypeScript React module not found - reactjs

Question

So let me start my saying I am fairly new to WebPack and React, but I have something basic working (at least it works in the browser). I am however an ok C# developer, so want to use Visual Studio as my editor of choice. I have created a fairly simple webpack setup and created a dummy solution file (Visual Studio 2015 update 3), where I have created a web site from file system.
I have a working (in the browser) Webpack + TypeScript + React + Babel setup which as I say works famously in the browser. It is largely based on the official guidelines for using TypeScript with React https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
I have followed that tutorial to the letter and even though it runs in the browser just fine also suffers from the same issue as my richer webpack setup.
So what is the issue exactly?
The main issue is that my setup doesn't seem to recognise "React" as a valid module import inside of a TSX file (even though everything is fine in the browser).
I have have read so many posts that talk about different Webpack settings, and tsconfig.json settings that my head is spinning.
I thought it might be better to show you some of my files to see if anyone knows how to fix my issue
.babelrc
{ "presets": ["es2015"] }
package.json (I am using NPM)
{
"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": {
"#types/react": "^15.0.23",
"#types/react-dom": "^15.5.0",
"lodash": "^4.17.4",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"#types/lodash": "^4.14.63",
"#types/react": "^15.0.23",
"#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",
"source-map-loader": "^0.2.1",
"typescript": "^2.3.2",
"webpack": "^2.4.1"
}
}
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"moduleResolution": "Node",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
webpack.config.js
let _ = require('lodash');
let webpack = require('webpack');
let path = require('path');
let babelOptions = {
"presets": ["es2015"]
};
function isVendor(module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
let entries = {
index: './index.tsx'
};
module.exports = {
context: __dirname + '/src',
entry: entries,
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
open: true, // to open the local server in browser
contentBase: __dirname,
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx"],
modules: [path.resolve(__dirname, "src"), "node_modules"]
//modulesDirectories: ['src', 'node_modules'],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
minChunks: function (module, count) {
// creates a common vendor js file for libraries in node_modules
return isVendor(module);
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
chunks: _.keys(entries),
minChunks: function (module, count) {
// creates a common vendor js file for libraries in node_modules
return !isVendor(module) && count > 1;
}
})
],
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader' 1st
// then 'babel-loader'
// NOTE : loaders run right to left (think of them as a cmd line pipe)
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
},
{
loader: 'awesome-typescript-loader'
}
]
},
// All files with a '.js' extension will be handled by 'babel-loader'.
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
}
};
When I run webpack all seems fine
Some of you may be wondering about my project structure which looks like this
And let me just show you that the typings for React/ReactDom are also present
Like I say when I run this, all seems ok, I get what I expect
A working react web page
A set of bundle files (which Index.html uses)
A Source map for my code
So this tells me the React module can be loaded by webpack/browser are working ok.
But when I try and edit the TSX (typescript JSX files) I see this
Typescript is 100% working for my own files, just cant seem to see React stuff.
Like I say I have tried so many suggested fixes and none have worked, please help me someone