獲取“因為 0 未被接受而中止”並使用 react-hot-loader 重新加載整頁

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

由於我的 development.rb 文件中的以下設置，rails 開發環境通過 webpack-dev-server 在應用程序資產管道之外提供 webpack 文件。

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

我一直試圖讓它工作幾個小時。 任何幫助，將不勝感激。

多謝你們！

Answer 1

好的，我遇到了同樣的錯誤，但在嘗試了一些事情之后，我發現了這一點：我的根組件是一個無狀態的功能組件（純函數）。 我將它重構為一個類組件和 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>
    );
  }
}

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 頁面上的內容

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

Answer 5

由於上面提供的答案仍然不適用於我的webpack 5 ，這是來自webpack的工作配置

在webpack.config.js 中

devServer: {
    .
    .
    .
    hot: true,
  }

在 webpack 入口點index.js添加

if (module.hot) {
    module.hot.accept();
}

在package.json啟動腳本

"scripts": {
    .
    .
    "start": "webpack serve --config /webpack.config.js"
  },

Answer 6

對於“webpack”：“^5.74.0”和“webpack-dev-server”：“^4.11.1”。 我在 webpack.config.js 中設置了 devServer.static = ['./webpack-dev-server', './dist']。 有我的配置：

module.exports = {
devtool: 'inline-source-map',
devServer: {
    open: true,
    static: ['./webpack-dev-server', './dist']
},
entry: path.join(__dirname, 'src', 'index.ts'),
module: {
    rules: [
        {
            test: /\.(ttf|png|svg|jpg|jpeg)$/i,
            type: 'asset/resource',
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.ts$/,
            loader: 'ts-loader',
            options: {
                configFile: path.join(__dirname, 'tsconfig.json')
            }
        }
    ]
},
mode: 'development',
output: {
    filename: '[name][contenthash].js',
    path: path.join(__dirname, 'dist'),
    clean: true,
},
plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src', 'index.html'),
        inject: 'body'
    })
],
resolve: {
    extensions: ['.js', '.ts']
}

}