Getting "Canceled because 0 is not accepted" and a full page reload with a hot-load reactor

Question

I am trying to set up a hot restart webpack using a hot reaction reactor. It basically works. I am using webpack in an existing rails application.

But this is not a hot reboot. It just starts a reboot every time it changes the reaction code. I get error messages:

[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 

Here are my webpack.hot.config.js settings:

 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'], }, }; 

And I run the code with

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

The rails development environment maintains webpack files outside the application resource pipeline through the webpack-dev server due to the following setting in my development.rb file.

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

I tried to get this work for hours. Any help would be greatly appreciated.

Thanks guys!

Answer 1

Ok, I was getting the same error, but after trying some things, I realized this: My root component was a stateless functional component (pure function). I reorganized it into a class component and BAM! hot reboot works again.

Before:

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

After:

 class App extends React.Component { constructor() { super(); this.state = {}; } render() { return ( <div> <Header links={headerLinks} logoSrc={logoSrc} /> {this.props.children} </div> ); } } 

Answer 2

I recently ran into this exact problem, the fix for me is removing this from the entries array: 'webpack-dev-server/client?http://localhost:9000/',

Since I also ran --hot as a command line argument, there were two instances of webpack-dev-server that got into a bad state.

Answer 3

I don’t know if this will specifically help your problem, but I also recently encountered this error - I fixed it by adding the .js extension to the module that I tried to configure using hmr - here was my code

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

I updated it to getRoutes = require('app/Routes.js') and the error webpack ^2.0.0-beta away using webpack ^2.0.0-beta .

it also works if I add the JS extension, as the first argument to hot takes like this:

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

so now it matches what is on the HMR webpage page