Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No HMR re-render when using react-refresh-webpack-plugin with a react module in a microfrontend architecture

See original GitHub issue

I have built an example repo to reproduce the issue: https://github.com/nilzona/sspa-hmr

In short the problem occurs when building a react based microfrontend module using the single-spa libraries. When serving that module with webpack@v5, webpack-dev-server@v4 and react-refresh-webpack-plugin@v0.5.0-rc.6 Everything seems to work but a change is not applied to the dom.

Any help would be greatly appreciated.

Issue Analytics

State:
Created 2 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

nilzonacommented, Sep 16, 2021

@pmmmwh … that was it! react-refresh needs to be loaded before the react-libraries which is normally done when you webpack bundles, but not in this case. Enabling react-developer-tools extension in chrome will however bring in react-refresh in correct order.

so conclusion is that if react and react-dom is loaded before the module that enables HMR with webpack-dev-server, then react-refresh needs to be loaded before which can be easily achieved with the React Developer Tools plugin for your browser.

0reactions

yuhubing11commented, Nov 30, 2022

hello！ Is this solved?

Top Results From Across the Web

Micro Frontends Step by Step Using React, Webpack 5, and ...

In this article, I will go step by step in creating two Micro Frontend React Components and render a Button component from one...

Speeding up your development with Webpack 5 HMR and ...

So I decided to dig in and get HMR and React fast-refresh up and running ... but we do not use it module.exports...

Hmr For Webpack 5 Module Federation - ADocLib

Full version history for @pmmmwh/reactrefreshwebpackplugin including change ... Implementing a micro frontend architecture using Webpack Module Federation.

webpack 4 - HMR not refresh html and scss (ReactJS)

require("../scss/style.scss"); import React from "react"; import ReactDOM from " ...

Revolutionizing Micro Frontends with Webpack 5, Module ...

Module Federation is a JavaScript architecture invented by Zack ... The module will smartly use the React source you already have and only ......