Ottenere "Interrotto perché 0 non è accettato" e ricaricare la pagina intera con react-hot-loader

Question

Sto provando a configurare il caricamento a caldo del webpack con react-hot-loader. È principalmente sembra funzionare. Sto usando il webpack in un'app per rails esistente.

Ma non si ricarica a caldo. Sta semplicemente facendo scattare una ricarica ogni volta che viene modificato il mio codice di reazione. I messaggi di errore che ottengo sono:

[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 

Ecco le mie impostazioni 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'], 
    }, 

}; 

e corro il codice con

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

L'ambiente di sviluppo rotaie serve i file del pacchetto web al di fuori della pipeline degli asset dell'applicazione tramite il webpack-dev-server a causa delle seguenti impostazioni nel mio file development.rb.

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

Ho cercato di farlo funzionare per ore. Qualsiasi aiuto sarebbe apprezzato.

Grazie ragazzi!

Answer 1

Non so se questo aiuterà specificamente il tuo problema, ma ho riscontrato questo errore anche di recente - l'ho risolto aggiungendo l'estensione .js al modulo che stavo cercando di configurare con hmr - questo era il mio codice

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

ho aggiornato a getRoutes = require('app/Routes.js') e l'errore è scomparso, utilizzando webpack ^2.0.0-beta.

funziona anche se aggiungo l'estensione JS come primo argomento di caldo accettare in questo modo:

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

così ora che corrisponda Dov'è sul webpack HMR page

Answer 2

Ok mi è stato sempre lo stesso errore, ma dopo aver provato alcune cose ho capito: il mio componente di root era un componente funzionale stateless (funzione pura). L'ho refactored a un componente di classe e BAM! il ricaricamento a caldo sta funzionando di nuovo.

Prima:

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

Dopo:

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

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

Answer 3

ho recentemente imbattuto in questo problema esatto, la correzione per me è stato la rimozione di questo dalla matrice entries: 'webpack-dev-server/client?http://localhost:9000/',.

Poiché stavo anche eseguendo --hot come argomento della riga di comando, c'erano due istanze di webpack-dev-server in uno stato negativo.