[BUG] Wrapping the config with TimeAnalyticsPlugin leads to Fast Refresh not working

[blazejkustra]

Describe the bug
Wrapping TimeAnalyticsPlugin breaks Fast Refresh for some reason, any change that you make leads to full page reload. Without this plugin Fast Refresh works great (check the videos below)

To Reproduce
It's a public repo, here is a PR that you can try.
⚠️ First try without any changes, fast refresh on web should work correctly, but when you remove return config line from webpack.dev.ts each time a change is made there is a full page reload.

        return config;
        return TimeAnalyticsPlugin.wrap(config);

You have to run npm install and npm run web to test it.

Expected behavior

without-plugin.mov

Actual behavior

with-plugin.mov

Additional context
You added this plugin to Expensify/App @ShuiRuTian here

[ShuiRuTian]

Subtle, this plugin intercepts many things(like require), rewite rules to ensure some hack is possible and create proxy for each webpack plugin hook and loader execution.

If fast refresh issue is caused by such hacking work, it seems there is not a good solution.

Maybe you could try rsdoctor https://rsdoctor.dev/ firstly? If there is same issue, then I guess the only solution is to remove such hacking plugin.

[blazejkustra]

I'll try that tomorrow, for now I just ignored ReactFastRefresh plugin, and that seems to work 😄

-        return TimeAnalyticsPlugin.wrap(config);
+        return TimeAnalyticsPlugin.wrap(config, {plugin: {exclude: ['ReactRefreshPlugin']}});