Webpack hmr net::ERR_INCOMPLETE_CHUNKED

Webpack hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

转载作者：行者123 更新时间：2023-12-02 10:32:28

28

4

加载后一切正常，hmr 正在工作。然后就出现这个错误。

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

这就像 webpackdevserver 有点崩溃然后重新启动，需要几秒钟然后 hmr 才能再次工作

[HMR] connected

然后“崩溃”等等......

看来我只在 Chrome(版本 55)中遇到这个问题(用 mozilla 测试，没有出现这个问题)。

我可能在我的 webpack 或 node conf 中遗漏了某些内容，但在文档中找不到某些内容。

知道如何解决这个问题吗？

//webpack 配置下面

const path = require('path');
const merge = require('webpack-merge');
const TARGET = process.env.NODE_ENV;
process.env.BABEL_ENV = TARGET;
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS =  {
    app: path.join(__dirname, 'client'),
    build: path.join(__dirname, 'build')
};

const common = {
    entry: {
        app: [PATHS.app, 'webpack-hot-middleware/client']
    },

    resolve: {
        extensions: ['', '.js', '.jsx']
    },

    output: {
        path: PATHS.build,
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css'],
                include: PATHS.app
            },
            { 
                test: /\.jsx?$/,
                loaders:['babel?cacheDirectory=true'],
                include: PATHS.app
            }
        ]   
    }
};

if(TARGET === 'dev' || ! TARGET) {
    module.exports = merge(common, {
        // devServer: {
        //  contentBase: PATHS.build,
        //  historyApiFallback: true,
        //  hot: true,
        //  inline: true,
        //  progress: true,
        //  stats: 'error-only',
        //  host: 'http://127.0.0.1/',
        //  port: 3000
        // },
        export: {
            isDev: true
        },
        plugins: [
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
              'process.env.NODE_ENV': JSON.stringify('dev')
            }),
            new NpmInstallPlugin({
                save: true
            })
        ],
        devtool: 'eval-source-map'
    });
}

if(TARGET === "build") {
    module.exports = merge(common, {});
}

//Nodejs 路由

this.app.get('/', function(req,res) {
            res.sendFile(path.join(__dirname, './../../build/index.html'))
        })

//index.html

<!DOCTYPE html>
<html>
    <head>
        <title> Ripple Data Analyzer</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App/>, document.getElementById('root'));

最佳答案

真正的原因是我在节点服务器上设置了 setTimeout

server.timeout = 100;

关于Webpack hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41579808/

28

4

0

文章推荐： verilog - 如何在FPGA中永久存储数据和程序？

webpack - HMR - 接受多个依赖项
HMR API 的 webpack 文档提到了以下方法: accept(dependencies: string[], callback: (updatedDependencies) => void)
angular - HMR 是附加而不是替换
这是我页面的初始加载: 在更改了一些文本后，HMR 被激活，但附加 DOM 而不是替换它: 有人知道是什么导致了这个问题吗？控制台上没有错误。更新: 我在命令行中使用了 ASP.NET Core w
Webpack HMR 不会重新加载 html
Minimalistic repository for problem testing 我现在有最简单的项目结构: root |-src --|index.pug --|-
reactjs - WebPack 禁用 HMR
我正在尝试运行一个简单的webpack-dev-server，如果相关源JavaScript文件已更改，它会在请求时编译.bundle.js文件。我目前不想启用热模块更换 (HMR)。我的服务器正在
Webpack hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
加载后一切正常，hmr 正在工作。然后就出现这个错误。 GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCO
javascript - Webpack - [HMR] 热模块替换被禁用
我环顾四周，但无法获得我在 stackoverflow 上看到的任何答案。我无法使用 webpack 或 webpack dev-server 的命令行；我只能使用 Node API。下面是我是如
javascript - 带有服务器渲染的 HMR 会导致校验和无效
我有一个与 webpack 捆绑在一起的 Express 服务器应用程序。客户端也与 webpack 捆绑在一起，并由服务器在开发模式下使用 webpack-dev-middleware 和 webp
typescript 和 HMR 不工作
我有使用 Typescript、ReactJS 和 Webpack 构建的前端应用程序。我正在尝试启用 HMR。这些是启动脚本 "build": "NODE_ENV=production $(np
Angular2 HMR(热模块更换)——删除日志
有什么方法可以忽略 HMR 上的日志吗？进行多次更改后，这非常烦人，因为控制台变得巨大，而且也很难跟踪自定义日志。这是执行日志记录的 HMR 模块的 log-apply-result.js 中的代码
javascript - Webpack HMR 从不更新页面
我一直在玩弄 Webpack 的不同功能，并且正在慢慢理解。典型的控制台输出: [WDS] App updated. Recompiling... [WDS] App hot update... [
Webpack 热模块替换 (HMR) 源映射未更新/新代码在开发工具中不可见
我已成功设置 HMR，一切正常，包括代理后端站点。剩下的唯一问题是，除非我完全重新加载，否则我无法在浏览器中看到实际的原始代码 (ES2015)。我是不是漏掉了什么或者这是不可能的？我使用 'che
list 请求上的 Webpack HMR 超时
我想在我的 React 应用程序中使用 Webpack HMR。我的 webpack 配置如下所示: var path = require('path'); var ExtractTextPlugin
Webpack hmr : __webpack_hmr 404 not found
我正在使用 webpack-dev-server 进行热模块替换。它工作得很好，但是这个错误每隔几秒就会出现在控制台中:GET http://mysite:8080/__webpack_hmr 404
webpack - HTML Webpack 插件和 HMR
有人知道当 Webpack 在热模式下运行时如何从 HTML Webpack 插件保存 HTML 页面吗？它在内存中保存文件，我想将它们保存到文件系统中。谢谢。最佳答案我用过 html-webpa
css - webpack HMR 没有加载 css
一个简单的 webpack 配置但不起作用: var path = require("path"); var HtmlWebpackPlugin = require('html-webpack-plu
angular-cli hmr 和 ngrx
我目前正在使用带有 ngrx 的 angular-cli 项目 (1.0.0-beta.25.5) 来管理状态。我关注了this article并设法让热模块更换正常工作，但是我还没有找到一种方法来在
javascript - 无效的 HMR 消息错误 Webpack
我从 Webpack 收到以下错误: 无效的 HMR 消息后跟一串非常详细的 JSON。我真的找不到任何资源来更好地调试它。有什么建议吗？如果有人能告诉我为什么在整个应用程序中使用 require
typescript - 使用 'bun dev' 进行热重载 (HMR)
我正在尝试新的 bun平台 (v0.1.6) 与 Hono . 我遵循的步骤: bun create hono test-api cd test-api bun dev 然后服务器显示这条信息: $
javascript - 为 Shopify 开发设置 webpack/HMR
我正在尝试设置 webpack 的开发服务器和 HMR 以与 Shopify 主题开发一起使用。运行服务器并打开本地 IP 时，我从 Shopify 的 DNS 提供商 CloudFlare 收到此错
javascript - 如何使用 Webpack 5 运行热重载 (HMR)？
我试图让 HMR 与 webpack v5 一起运行，但它不起作用。当我修改并保存文件时，webpack 会正确重新编译项目，但前端没有更新。我阅读了这篇文章并按照说明操作:https://webp

首页

博学

6Ren·AI

商城

Webpack hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING