webpack / webpack/webpack-dev-server

Hot reload doesn't work in 4.x with ModuleFederationPlugin

Open
#4,378 29 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.8k
Forks
1.5k
Avg merge
5h 32m
Merged PRs (30d)
6

Description

Bug report

Webpack dev server doesn't perform the hot reload properly in conjunction with ModuleFederationPlugin in v4.x but works in v3.x

Actual Behavior

When I set up a simple project using those dependencies:

{
    "name": "test",
    "version": "1.0.0",
    "scripts": {
        "start": "webpack serve --config=config/webpack.dev.js",
        "build": "webpack --config=config/webpack.prod.js"
    },
    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "babel-loader": "^8.2.4",
        "clean-webpack-plugin": "^4.0.0",
        "html-webpack-plugin": "^5.5.0",
        "webpack": "^5.71.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1",
        "webpack-merge": "^5.8.0"
    }
}

I manage to startup my application, I can't see any errors but when I update the source code, the update is not propagated into the browser and the change is visible ONLY after the full reload.

When I downgrade back to 3.x everything works smoothly.

I used this repository as reference: https://github.com/richardtbell/microfrontend-hello-world

Since this repository was quite older, I wanted to update to the latest version of all packages, the only issue I had was with the webpack-dev-server as I mentioned above.

Expected Behavior

A SPA is HOT reloaded as expected

How Do We Reproduce?
  1. Clone https://github.com/richardtbell/microfrontend-hello-world
  2. Go into packages/helloReact
  3. run: npm run start, update App.js, see the change in the browser is being propagated
  4. Update the dependencies with the snippet above.
  5. Do the same
  6. The change won't be visible, only after reload
  7. Try to downgrade the dev server to 3.x
  8. Everything will work
  9. OR: keep 4.x and remove the ModuleFederationPlugin from the webpack config and the hot reload will work again
Please paste the results of npx webpack-cli info here, and mention other relevant information
❯ npx webpack-cli info

  System:
    OS: macOS 12.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 29.45 MB / 16.00 GB
  Binaries:
    Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v14.17.2/bin/npm
  Browsers:
    Brave Browser: 99.1.36.119
    Chrome: 100.0.4896.75
    Safari: 15.4
  Packages:
    babel-loader: ^8.2.4 => 8.2.4
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    webpack: ^5.71.0 => 5.72.0
    webpack-cli: ^4.9.2 => 4.9.2
    webpack-dev-server: ^4.8.1 => 4.8.1
    webpack-merge: ^5.8.0 => 5.8.0

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone the linked microfrontend-hello-world repository, enter packages/helloReact, and run npm run start to reproduce the behavior. Read App.js and the webpack configuration, especially config/webpack.dev.js and the ModuleFederationPlugin setup; done means source changes appear in the browser without a full reload when using webpack-dev-server 4.x.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.