Webpack：ts-loader抛出了类型＆＃39; NodeModule＆＃39;上缺少属性makeHot的错误

Question

当我尝试使用webpack编译我的项目时，我得到以下错误。我已经尝试切换到awesome-typescript-loader，但它会抛出相同的错误。同样降级到所有相应组件的旧版本

错误

user@machine:~/dev/react_typescript$ webpack
Hash: 20c8f3f8aab939c697ee
Version: webpack 1.15.0
Time: 5404ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.04 MB       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 184 hidden modules

ERROR in ./src/index.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/index.tsx(1,367)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

ERROR in ./src/index.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/index.tsx(19,237)
      TS2339: Property 'default' does not exist on type '{}'.

ERROR in ./src/index.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/index.tsx(23,200)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

ERROR in ./src/index.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/index.tsx(23,676)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(1,367)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(15,237)
      TS2339: Property 'default' does not exist on type '{}'.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(29,54)
      TS2339: Property '__proto__' does not exist on type '() => any'.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(32,5)
      TS2554: Expected 3 arguments, but got 2.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(48,200)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

ERROR in ./src/App.tsx
[tsl] ERROR in /home/marvin/dev/react_typescript/src/App.tsx(48,674)
      TS2339: Property 'makeHot' does not exist on type 'NodeModule'.

我的设置

webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    resolve: {
        extensions: ["", ".js", ".jsx", ".ts", ".tsx"],
        modules: [
            path.resolve(__dirname, "node_modules")
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loaders: ['ts-loader', 'react-hot', 'babel'],
            include: path.join(__dirname, 'src')
        }]
    }
};

的package.json：

{
  "name": "react-hot-boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate for ReactJS project with hot code reloading",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
  },
  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
  "devDependencies": {
    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",
    "@types/react-hot-loader": "^3.0.6",
    "babel-core": "^6.0.20",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.6.2",
    "express": "^4.13.4",
    "react-hot-loader": "^1.3.0",
    "ts-loader": "^3.5.0",
    "tslib": "^1.9.0",
    "typescript": "^2.7.2",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  },
  "dependencies": {
    "@types/webpack-env": "^1.13.5",
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  }
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es2015", "dom", "es2017"
    ],
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "tslib": [ "node_modules/tslib/tslib.d.ts" ]
    },
    "typeRoots" : [
      "./node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "static"
  ]
}

的src / App.tsx

import * as React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, world.</h1>
        );
    }
}

的src / index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));