title: Typescript with react-hot-loader errors with cannot find name __REACT_HOT_LOADER__
body: <p>I'm new to typescript and I'm attempting to configure a small app with webpack 3, react-hot-loader, and awesome-typescript-loader. So far I'm receiving two errors that I can't seem to figure out.</p>
  
  <p>The first error is: <code>TS2304: Cannot find name '__REACT_HOT_LOADER__'</code></p>
  
  <p>The second error is <code>TS2304: Cannot find name '__webpack_exports__'</code></p>
  
  <p>Here's my .tsconfig:</p>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "./public/",  
          "strictNullChecks": true,  
          "module": "es6",           
          "jsx": "react",            
          "target": "es5",           
          "allowJs": true,
          "moduleResolution": "node" 
      },
      "include": [
          "./src/"
      ]
  }
  </code></pre>
  
  <p>and here's my webpack.config.js</p>
  
  <pre><code>require('dotenv').config();
  var webpack = require('webpack');
  var path = require('path');
  
  var srcPath = path.join(__dirname, '/src')
  var distPath = path.join(__dirname, '/public');
  
  const config = {
      output: {
          path: distPath,
          publicPath: '/public',
          filename: 'bundle.js'
      },
      resolve: {
          extensions: ['.js', '.ts', '.tsx']
      },
      module: {
          rules: [
              {
                  test: /\.(j|t)sx?$/,
                  exclude: /node_modules/,
                  use: 'awesome-typescript-loader'
              },
              { 
                  enforce: "pre", 
                  test: /\.js$/, 
                  loader: "source-map-loader" 
              }
          ]
      },
      context: srcPath,
      plugins: [
          new webpack.NamedModulesPlugin(),
          new webpack.EnvironmentPlugin(['NODE_ENV'])
      ]
  };
  
  // Development Environment
  if (process.env.NODE_ENV === 'development') {
      config.entry = [
          'react-hot-loader/patch',
          'webpack-hot-middleware/client?noInfo=false',
          path.join(srcPath, '/index.tsx')
      ]
  
      config.module.rules.push(
          {
              test: /\.tsx?$/,
              exclude: /node_modules/,
              loader: 'react-hot-loader/webpack'
          }
      )
  
      config.plugins.push(
          new webpack.HotModuleReplacementPlugin()
      )
  }
  
  // Production Environment
  if (process.env.NODE_ENV === 'production') {
      config.entry = [
          path.join(srcPath, '/index.tsx')        
      ];
  
      config.plugins.push(
          new webpack.optimize.UglifyJsPlugin()        
      )
  }
  
  module.exports = config;
  </code></pre>
  
  <p>I've tried endless different configurations and even dug into the source code for both react-hot-loader and webpack and can't seem to figure out why it's not recognizing those variables. I also have 0 issues with it if i switch my environment to production and bypass the hot reloading so it makes me think the second error is related to the first. </p>
  
  <p>What am I missing? (I'm sure it's right in front of me and I'm just not seeing it)</p>