獲取「因爲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進入不良狀態的實例。