获取“由于 0 不被接受而中止”并使用 react-hot-loader 重新加载整页

Posted 2023-02-21

【中文标题】获取“由于 0 不被接受而中止”并使用 react-hot-loader 重新加载整页

【英文标题】：Getting "Aborted because 0 is not accepted" and full page reload with react-hot-loader

【发布时间】：2016-06-19 02:50:34

【问题描述】：

我正在尝试使用 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 开发环境通过 webpack-dev-server 为应用程序资产管道之外的 webpack 文件提供服务，因为我的 development.rb 文件中有以下设置。

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

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

谢谢大家！

【参考方案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 上的内容

【参考方案2】：

好吧，我遇到了同样的错误，但在尝试了一些事情之后我发现了这一点：我的根组件是一个无状态的功能组件（纯函数）。我将它重构为一个类组件和 BAM！热重载又开始工作了。

之前：

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

之后：

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

【讨论】：

一个电梯保护程序，你知道为什么会这样吗？

【参考方案3】：

我最近遇到了这个确切的问题，我的解决方法是从 entries 数组中删除它：'webpack-dev-server/client?http://localhost:9000/',。

由于我也将--hot 作为命令行参数运行，所以webpack-dev-server 有两个实例进入错误状态。

【参考方案4】：

我遇到了类似的问题。 经过 2 天的研究和尝试不同的事情，我发现了我的问题的最简单原因： 在 webpack.config.js 中，我启用了 HRM 开发服务器。而且我还有一个从命令行运行的 HMR 服务器。感谢Tyler Kelley 的提示（见上文），只需从命令行中删除 --hot，它现在就可以正常工作了。

当前的 webpack.config.js

devtool: "inline-source-map",
devServer: 
    publicPath: '/dist/',
    contentBase: path.join(__dirname, 'public'),
    port: 9000,
    hot: true
,

使用此配置，请不要这样做：

npx webpack-dev-server --hot --inline

这样做：

npx webpack-dev-server