TypeError: ReactHotAPI不是函数

Question

错误描述，

TypeError: ReactHotAPI is not a function
<anonymous>
 bundle.js:2632
<anonymous>
 bundle.js:2632
<anonymous>
 bundle.js:2632
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:2572
<anonymous>
 bundle.js:2572
<anonymous>
 bundle.js:2572
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:2347
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:1491
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:1411
<anonymous>
 bundle.js:1411
<anonymous>
 bundle.js:1411
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:698
<anonymous>
 bundle.js:698
<anonymous>
 bundle.js:698
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:595
<anonymous>
 bundle.js:595
__webpack_require__()
 bundle.js:556
hotCreateRequire/fn()
 bundle.js:87
<anonymous>
 bundle.js:586
__webpack_require__()
 bundle.js:556
<anonymous>
 bundle.js:579
<anonymous>
 bundle.js:1
 bundle.js:2632:318

我的Webconfig，

module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: {
      'react-native': 'react-web',
      'ReactNativeART': 'react-art',
    },
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? [
    config.paths.index
  ]: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    config.paths.index,
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: 'bundle.js'
  },
  plugins: [
     new HasteResolverPlugin({
      platform: 'web',
      nodeModules: ['react-web']
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
      }
    }),
    isProd? new webpack.ProvidePlugin({
      React: "react"
    }): new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlPlugin(),
  ],
  module: {
    loaders: [
      {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2&presets[]=stage-0'],
      include: [config.paths.src],
      exclude: '/node_module' 
      },
    { 
      test: /\.css$/, 
      loader: "style-loader!css-loader"
    },
    {
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      loader: 'file-loader'
    }],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};

我尝试了很多方法来解决这个问题。在某个地方写入排除节点模块，它就可以工作了。是的，它是在排除之后工作的。我单独为web构建了GiftedMassanger，但我没有排除任何节点模块。现在我将GiftedMessanger与我的主应用程序集成在一起，然后我面临着真正残酷的事情:如果我排除节点模块，那么主应用程序将会工作，而天才信使将不会工作。如果我不排除节点模块，那么我得到的ReactHotAPI不是一个函数。我想要中庸之道来满足这两件事。

Answer 1

你需要在你的加载器中排除node_modules --你排除了node_module --我想这应该行得通。

loaders: [
      {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2&presets[]=stage-0'],
      include: [config.paths.src],
      exclude: '/node_modules/' 
      },
    { 
      test: /\.css$/, 
      loader: "style-loader!css-loader"
    },
    {
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      loader: 'file-loader'
    }]