webpack / webpack/webpack-dev-server
Hot reload doesn't work in 4.x with ModuleFederationPlugin
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?
- Clone https://github.com/richardtbell/microfrontend-hello-world
- Go into
packages/helloReact - run: npm run start, update App.js, see the change in the browser is being propagated
- Update the dependencies with the snippet above.
- Do the same
- The change won't be visible, only after reload
- Try to downgrade the dev server to 3.x
- Everything will work
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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