Component modifications are not applied

It is quite strange but I got stuck in the following situation:

• any scss change is successfully applied in-place
• any json changes is successfully applied in-place
• all typescript component changes are ignored.

In the network tab I can see that all changes were successfully received and console notifies me that changes are applied and App is up to date!, unfortunately there is no visual or logic changes and UI keeps the stale state. Only full reload can fix the situation.

I reviewed project configuration multiple times without any luck. I’ve modified entry to match the following format: entry: { main: ['./src/index.tsx'] } and added target: 'web'. I went across the provided Troubleshooting guide without any luck. I’m confused because of no warnings/errors.

Used versions:

react-refresh-webpack-plugin: 0.5.0-beta.1 (last stable version also affected)
babel-loader: 8.2.2
@babel-core: 7.13.10
react-refresh: 0.9.0
react: 16.13.1
webpack: 5.27.2
webpack-dev-server: 3.11.2 (last beta makes no difference)

Seems like this bug is closely related to this one

How can I debug this and provide you with some more helpful information?

[pmmmwh]

DevTools (and React Refresh) initialises global development hooks where the development build of React would attach renderer instances to.

This is what needed to happen before React renders. I do not recommend applying this logic yourself.

This plugin ensures this is the case by using this entry point, which is injected in front of all your entry points. However, in the case of externalisation, this approach can be easily defeated.

In theory you can patch your app in a way where the entrypoint above would always run first - there are checks to ensure single injection so it should be quite safe to have it in multiple places. I would strongly advise going the route of properly externalising things and ensuring execution order.

Edit: Actually, now that I think about it - If React is externalised and provided as a singleton in the host app, wiring up plugin apps for React Refresh (specifically the setup part) seems to be useless because:

1. It doesn’t really have it’s own React instance, so in technical sense it actually re-uses the host app’s React instance, which means it is actually the host app that needs to be wired up.
2. It is potentially and often imported AFTER the host app executes, which in turn would have already executed React renderer code, which means it would have been too late for any setup to run.

You will still need the plugin code which handles the runtime globals as well as the injected HMR runtime code though. We do not currently have the option for you to exclude entry injection, but since entries have checks for single entry you could be quite fine by doing overlay: false and ignore the library option (which means the whole app would reuse the same singleton of React Refresh logic).

Mind trying this approach?

• Wire up the “library” apps with React Refresh, skipping the library option.
• Wire up the “host” app with React Refresh WITHOUT externalizing react-refresh, only react and react-dom. In this instance of RR you can configure it to your liking.

[erikt9]

In my case I have an external react that is built as a separate webpack bundle and shared throughout the site (for use by other webpack and non-webpack apps). What helped me was to externalize the react-refresh / runtime as well (see https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/212#issuecomment-699944069).

So in summary, in my bundle that builds react and exposes it on window, I make sure to import ReactRefreshEntry and react-refresh/runtime before React. This bundle now exposes the react-refresh/runtime on window and is referenced as an external in my main webpack bundle.