反応ホットローダーエラーのTypescriptが名前を見つけることができません__REACT_HOT_LOADER__

Question

私はtypescriptに慣れていて、webpack 3、反応ホットローダー、素晴らしいタイプチェッカーローダーで小さなアプリを設定しようとしています。今のところ私は理解できないような2つのエラーを受けています。

最初のエラーは次のとおりです。TS2304: Cannot find name '__REACT_HOT_LOADER__'

2番目のエラーは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; 

です私は無限の異なった設定と、 gを反応ホットローダーとウェブパックの両方のソースコードに追加して、なぜそれらの変数を認識しないのか分からないようです。私は生産に私の環境を切り替えると、それは私が2番目のエラーが最初に関連していると思うようにホットリロードをバイパスする場合、私はまた、0の問題があります。

私には何が欠けていますか？

Answer 1

ts、js、tsx、jsxファイルの最初のローダーとして 'react-hot-loader/webpack'を追加する必要があります。これは私の目の前にあると確信しています。だからあなたのwebpack.config.jsファイルを編集して、次の行に置き換えます。助けを

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