获取“因为0不被接受而中止”，并使用react-hot-loader来重新加载整个页面

Question

我正在尝试使用react-hot-loader来设置webpack热重载。它主要是似乎工作。我在现有的rails应用程序中使用webpack。

但它不是热重装。每次我的反应代码改变时，它都会触发重新加载。错误消息我得到的是：

[HMR] Cannot apply update. Need to do a full reload! - dev-server.js:18 
[HMR] Error: Aborted because 0 is not accepted - dev-server.js:19 
    at hotApply (http://localhost:8080/assets/webpack/bundle.js?body=1:380:31) 
    at hotUpdateDownloaded (http://localhost:8080/assets/webpack/bundle.js?body=1:293:13) 
    at hotAddUpdateChunk (http://localhost:8080/assets/webpack/bundle.js?body=1:273:13) 
    at webpackHotUpdateCallback (http://localhost:8080/assets/webpack/bundle.js?body=1:5:12) 
    at http://localhost:8080/assets/webpack0.bd89931b2fa8e2901794.hot-update.js:1:1 

Navigated to http://lvh.me:3000/react_page 

这里是我的webpack.hot.config.js设置：

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

var config = module.exports = { 

    // Set 'context' for Rails Asset Pipeline 
    context: __dirname, 

    entry: { 
     App: [ 
      'webpack-dev-server/client?http://localhost:8080/', // WebpackDevServer host and port 
      'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors 
      './app/frontend/javascripts/app.js' // Your appʼs entry point 
     ], 
     vendor: ['jquery', 'react', 'react-dom', 'react-redux', 'redux','redux-thunk'] 
    }, 

    devtool: 'inline-source-map', 

    // Require the webpack and react-hot-loader plugins 
    plugins: [ 
     //new webpack.HotModuleReplacementPlugin(), 
     new webpack.optimize.CommonsChunkPlugin(
     { 
      name: 'vendor', 
      chunks: [''], 
      filename: 'vendor.js', 
      minChunks: Infinity 
     }), 
     new webpack.NoErrorsPlugin(), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jquery': 'jquery' 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loaders: [ 
        'react-hot', 
        'babel?presets[]=es2015&presets[]=react' 
       ], 
       cacheDirectory: true 
      } 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'app', 'assets', 'javascripts', 'webpack'), // Save to Rails Asset Pipeline 
     filename: 'bundle.js', // Will output App_wp_bundle.js 
     publicPath: 'http://localhost:8080/assets/webpack', 

     //publicPath: 'http://localhost:8080/assets/webpack' // Required for webpack-dev-server 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'], 
     modulesDirectories: ['node_modules'], 
    }, 

}; 

而且我运行

webpack-dev-server -d --config webpack.hot.config.js --hot --inline 

Rails开发环境的代码由于我的development.rb文件中有以下设置，所以通过webpack-dev-server为应用资产管道外的webpack文件提供服务。

config.action_controller.asset_host = Proc.new { |source| 
    if source =~ /webpack\/bundle\.js$/i 
    "http://localhost:8080" 
    end 
} 

我一直在试图让这个工作几个小时。任何帮助，将不胜感激。

谢谢你们！

Answer 1

我不知道这是否会专门帮助您解决问题，但最近我也遇到了这个错误 - 我通过在模块中添加.js扩展名来修复它，我试图用hmr设置 - 这里是我的代码

if (module.hot) { 
    module.hot.accept('app/Routes',() => (
    getRoutes = require('app/Routes') 
)) 
} 

我把它更新到getRoutes = require('app/Routes.js')和错误消失，使用webpack ^2.0.0-beta。

它也可以，如果我添加了JS扩展为热的第一个参数接受像这样：

if (module.hot) { 
    module.hot.accept('app/Routes.js',() => (
    getRoutes = require('app/Routes') 
)) 
} 

所以现在它匹配最新的webpack HMR page

Answer 2

好吧，我居然也得到了同样的错误，但在尝试了一些事情后，我想到了这一点：我的根组件是一个无状态的功能组件（纯功能）。我将它重构为类组件和BAM！热再装正在重新开始。

前：

const App = (props) => (
    <div> 
    <Header links={headerLinks} logoSrc={logoSrc} /> 
    {props.children} 
    </div> 
); 

后：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = {}; 
    } 

    render() { 
    return (
     <div> 
     <Header links={headerLinks} logoSrc={logoSrc} /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

Answer 3

我最近就遇到了这个问题，准确，修复我从entries阵列删除此：'webpack-dev-server/client?http://localhost:9000/',。

由于我还在运行--hot作为命令行参数，因此有两个webpack-dev-server进入不良状态的实例。