javascript - 带有 react-hot-loader 错误的 Typescript 找不到名称 __REACT_HOT_LOADER__

Question

我是 typescript 的新手，我正在尝试使用 webpack 3、react-hot-loader 和 awesome-typescript-loader 配置一个小型应用程序。到目前为止，我收到了两个我似乎无法弄清楚的错误。

第一个错误是:TS2304: Cannot find name '__REACT_HOT_LOADER__'

第二个错误是TS2304: Cannot find name '__webpack_exports__'

这是我的 .tsconfig:

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

这是我的 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;

我尝试了无数种不同的配置，甚至深入研究了 react-hot-loader 和 webpack 的源代码，但似乎无法弄清楚为什么它无法识别这些变量。如果我将我的环境切换到生产环境并绕过热重载，我也有 0 个问题，所以这让我认为第二个错误与第一个错误有关。

我错过了什么？ (我确定它就在我面前，只是我没看到而已)

Answer 1

您必须添加 'react-hot-loader/webpack' 作为 ts、js、tsx、jsx 文件的第一个加载器。因此，编辑您的 webpack.config.js 文件并替换以下行:

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

以下几行:

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