Multi-compiler mode, hot-update.json 404 #2355

maqunjing · 2019-12-17T12:33:30Z

Operating System:macOS Mojave version 10.14.3
Node Version:10.16.3
NPM Version:6.9.0
webpack Version:4.39.2
webpack-dev-server Version:3.9.0
Browser:Chrome 79

This is a bug
This is a modification request

Code

// webpack.config.js
const path = require('path');
const IP = require('ip').address()
module.exports = [
    {
        name: 'hello',
        devServer:{
            hotOnly: true,
            host: '0.0.0.0',
            sockPath: '/custom-sockjs-node',
            
            sockHost: `${IP}`, 
            sockPort: '8080', 
            headers: {
                'Access-Control-Allow-Origin': '*', 
            
            
            },
        },
        mode: 'development',
        
        
        context: path.resolve(__dirname, 'app'), 
        
        optimization: {
            minimize: false 
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'index.js',
            publicPath: `http://${IP}:8080/`
        },
        plugins: [
            
            
            
        ],
        entry: './src/index.js',
    },
    {
        name: 'world',
        mode: 'development',
        context: path.resolve(__dirname, 'app'), 
        
        optimization: {
            minimize: false 
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'index2.js',
            publicPath: `http://${IP}:8080/`
        },
        plugins: [
        ],
        entry: './src/index2.js',
    }
];

// hello.js
export default {
    world: 'lala'
}

// index.js
import Hello from './hello.js';
console.log(Hello.world);
console.log(123456)

if (module.hot) module.hot.accept()

// index2.js
import Hello from './hello.js';
console.log(Hello.world);
console.log(14113333312212333323333999444333)

if (module.hot) module.hot.accept()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="http://10.104.32.88:8080/index.js"></script>
    <script src="http://10.104.32.88:8080/index2.js"></script>
</body>
</html>

Expected Behavior

bundles don't process each other's updates

Actual Behavior

alexander-akait · 2019-12-17T12:36:38Z

Please create reproducible test repo

maqunjing · 2019-12-17T13:29:55Z

Please create reproducible test repo

thanks!
https://github.com/maqunjing/issue-webpack-dev-server-multi-compiler-mode

zachintosh · 2020-01-27T21:53:26Z

Same issue here. I am using the name property on the configs, but when either of my two compilers recompile, it triggers an attempt to update via HMR from both.

Say Compiler 1 recompiles on a file save:

Recompiles
Both attempt to update through HMR
One succeeds, but the other fails (hot-update 404 error)

Is there any update on how to fix this?

7kms · 2020-06-24T09:54:26Z

Same problem with me
I hava 2 webpack-dev-server instance in a page.

if (module.hot) module.hot.accept()

so the second access of module may be is same as the first one.

Reference “Multi-compiler mode, hot-update.json 404” -> webpack/webpack-dev-server#2355 Signed-off-by: Andrew Welch <[email protected]>

- Added `--no-tablespaces` to the mysqldump command options to work around changes in MySQL Fixed - Modern config only for local dev, [fixing multi-compiler issues](webpack/webpack-dev-server#2355) with HRM - Fix redis session config to use `App::sessionConfig()` Changed - Remove `[hash]` from dev config to eliminate potential [memory errors](webpack/webpack-dev-server#438) - Use `[contenthash]` in production instead of [hash or chunkhash](webpack/webpack.js.org#2096) - Readme file to give proper credit - - -

ArgonAlex · 2020-08-19T07:46:27Z

I just ran into this problem. After lots of debugging, I discovered that the order in which the compilers emit the "done" event seems to determine whether you run into this issue or not.

In my case, if the client compiler finished before the server compiler, then I was seeing this issue. But if the client compiler finishes last, everything works as expected.

luogan210 · 2020-09-03T01:59:31Z

this issue still open , how to solve it

aboks · 2020-09-09T07:08:05Z

I can consistently reproduce this issue as well, with the following case: https://gist.github.com/aboks/b5ca75f028631ca06d1235f866b348a7 (in case it helps). It is only a minimal variation of the multi-compiler example that comes with Webpack: I mainly added something that can be HMR'ed and changed the output so that both compilers output to a different path (without an explicitly configured filename). If I then run webpack-dev-server --watch --hot, open both 'magic' html files and make a change to the message in shared-stuff.js exactly one of the open pages fails to download the <hash>.hot-update.json file (due to a 404) and falls back to a full page reload.

It seems that the failing page tries to download the <hash>.hot-update.json file with the hash of the other compiler. This depends on the order in which the two compilers finish. In a situation where the two compilers would write to the same output.path (as in the original multi-compiler example) the hot update file with the 'incorrect' hash can be found as if nothing is wrong, but with different output paths the hot update file with the hash of compiler A cannot be found in the out path of compiler B.

Other observation: if I add different output filenames to both compilers (these are commented out in the gist), everything seems to work fine. Could it be that hashes are emitted linked to the output filename, but without taking the output path into account?

daychongyang · 2020-09-23T04:55:37Z

Set name parameters to make sure bundles don't process each other's updates. It can run normally. 😉 https://github.com/webpack-contrib/webpack-hot-middleware#multi-compiler-mode

aboks · 2020-09-23T07:08:50Z

@daychongyang my example in #2355 (comment) has name-parameters set, but can still consistently reproduce this issue. So unfortunately that does not seem to be sufficient.

daychongyang · 2020-09-23T07:14:16Z

@daychongyang my example in #2355 (comment) has name-parameters set, but can still consistently reproduce this issue. So unfortunately that does not seem to be sufficient.

The difference is that I directly used webpack-dev-middleware and webpack-hot-middleware instead of webpack-dev-server, and I think this should not cause an error. 🤔

hiisea · 2021-07-20T07:41:56Z

this issue still open , how to solve it

alexander-akait · 2021-07-21T22:07:15Z

Close in favor #2792 #2792 (comment), here is the same problem, you use different chunks with different runtime on the same page, anyway it is possible in webpack v5, set runtimeChunk: single, check you have unique https://webpack.js.org/configuration/output/#outputuniquename for each runtime.

Also we have small problems with multi compiler mode webpack/webpack-cli#2408 (it will be fixed in near future).

Also I recommend to use this https://webpack.js.org/configuration/other-options/#dependencies if one build depend on other

This comment has been minimized.

Sign in to view

aboks mentioned this issue Sep 9, 2020

HMR: hot update file 404 webpack/webpack#9186

Closed

alexander-akait mentioned this issue Sep 14, 2020

[BUG] in multiple configs runs just first config, but should all #2737

Closed

alexander-akait closed this as completed Jul 21, 2021

alexander-akait mentioned this issue Jul 21, 2021

improve multi compiler mode (reuse already watch) webpack/webpack-dev-middleware#979

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multi-compiler mode, hot-update.json 404 #2355

Multi-compiler mode, hot-update.json 404 #2355

maqunjing commented Dec 17, 2019

alexander-akait commented Dec 17, 2019

maqunjing commented Dec 17, 2019

This comment has been minimized.

zachintosh commented Jan 27, 2020 •

edited

Loading

7kms commented Jun 24, 2020

ArgonAlex commented Aug 19, 2020

luogan210 commented Sep 3, 2020

aboks commented Sep 9, 2020

daychongyang commented Sep 23, 2020

aboks commented Sep 23, 2020

daychongyang commented Sep 23, 2020 •

edited

Loading

hiisea commented Jul 20, 2021

alexander-akait commented Jul 21, 2021

Multi-compiler mode, hot-update.json 404 #2355

Multi-compiler mode, hot-update.json 404 #2355

Comments

maqunjing commented Dec 17, 2019

Code

Expected Behavior

Actual Behavior

alexander-akait commented Dec 17, 2019

maqunjing commented Dec 17, 2019

This comment has been minimized.

zachintosh commented Jan 27, 2020 • edited Loading

7kms commented Jun 24, 2020

ArgonAlex commented Aug 19, 2020

luogan210 commented Sep 3, 2020

aboks commented Sep 9, 2020

daychongyang commented Sep 23, 2020

aboks commented Sep 23, 2020

daychongyang commented Sep 23, 2020 • edited Loading

hiisea commented Jul 20, 2021

alexander-akait commented Jul 21, 2021

zachintosh commented Jan 27, 2020 •

edited

Loading

daychongyang commented Sep 23, 2020 •

edited

Loading