TypeError:ReactHotAPI不是函数

时间:2016-06-21 10:32:49

标签: reactjs react-native webpack babeljs webpack-dev-server

错误说明,

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与我的主应用程序集成然后我面对webpack的真正残酷的事情,如果我排除节点模块然后主应用程序将工作和天才信使不会。如果我不排除节点模块,那么我得到ReactHotAPI不是一个功能。我想要中间方式来满足这两件事。

1 个答案:

答案 0 :(得分:2)

你需要在你的加载器中排除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'
    }]