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

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

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

谢谢你们！

Answer 1

好的我得到了同样的错误，但在尝试了一些事情之后我想出了这个：我的根组件是无状态功能组件（纯函数）。我将它重构为类组件和BAM！热重装正在重新开始。

在：

    vL1 = ["AB", "AB", "AB", "AB", "AB", "CS", "CS", "CS", "ND", "ND"];
vL2 = ["1",  "1",  "1",  "2",  "3",  "1",  "1",  "2",  "1",  "1"];

var counts = vL1.reduce(function(counts,vL1Element,index) {
  //initialize this index if it isn't set
  if(counts[vL1Element] == undefined) {
    counts[vL1Element] = {};
  }
  //set this count to 0 if it hasn't been set yet
  if (counts[vL1Element][vL2[index]] == undefined) {
    counts[vL1Element][vL2[index]] = 0;
  }
    counts[vL1Element][vL2[index]]++;
  return counts;
},{});
console.log(counts);

后：

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

Answer 2

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

由于我还在运行--hot作为命令行参数，因此有两个webpack-dev-server实例处于错误状态。

Answer 3

我不知道这是否会特别有助于解决您的问题，但我最近也遇到了这个错误 - 我通过在我尝试使用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

上的内容

Answer 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

获取＆＃34;中止因为0不被接受＆＃34;并使用react-hot-loader重新加载整页

4 个答案: