「0が受け入れられなかったために中断されました」と反応ホットローダーでフルページが読み込まれる

Question

反応ホットローダーを使ってwebpackホットリロードを設定しようとしています。それはのほとんどはが動作しているようです。私は既存のレールアプリで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 

レールの開発環境でコードを実行します私の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

これは特に、あなたの問題を助ける場合、私は知らないが、私は最近、同様にこのエラーが発生しました - ここに私のコードだった - 私はHMRで設定しようとしていたモジュールに.js拡張子を追加することによって、それを修正

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

[OK]を

Answer 2

に私は同じエラーを取得していただきましたので、今では一致して、いくつかのことを試した後、私はこれを理解しました。私のルートコンポーネントは、ステートレスな機能コンポーネント（純粋な関数）でした。私はそれをクラスコンポーネントとBAMにリファクタリングしました！ホットリロードが再び機能しています。前

：

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

後：'webpack-dev-server/client?http://localhost:9000/',：

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

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

Answer 3

私は最近、私のために修正がentries配列からこれを削除して、この正確な問題に遭遇しました。

--hotをコマンドライン引数として実行していたため、webpack-dev-serverという2つのインスタンスが不正な状態になっていました。