Typescript with react-hot-loader errors with cannot find name __REACT_HOT_LOADER__

Question

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.

The first error is: TS2304: Cannot find name '__REACT_HOT_LOADER__'

The second error is TS2304: Cannot find name '__webpack_exports__'

Here's my .tsconfig:

{
    "compilerOptions": {
        "outDir": "./public/",  
        "strictNullChecks": true,  
        "module": "es6",           
        "jsx": "react",            
        "target": "es5",           
        "allowJs": true,
        "moduleResolution": "node" 
    },
    "include": [
        "./src/"
    ]
}

and here's my webpack.config.js

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;

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.

What am I missing? (I'm sure it's right in front of me and I'm just not seeing it)

Answer 1

You must add 'react-hot-loader/webpack' as first loader for ts, js, tsx, jsx files. So edit your webpack.config.js file and replace following lines:

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            use: 'awesome-typescript-loader'
        }

with following lines:

        {
            test: /\.(j|t)sx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot-loader/webpack','awesome-typescript-loader']
        }