[BUG]: Silently fails with multiple exports

[jaidetree]

Just spent about 6 hours trying to understand why my component is not reloading (or refreshing) only to find it’s because I have multiple exports.

Problem

I understand that this library may never support files with multiple exports, but in my experience it’s a pretty common pattern to export an atom, a util function or two related to a component, a constant, or multiple components.

More importantly, the app was not reloading and not refreshing, and no information was available to help me understand fast-refresh expected only a single component export and that it would even try to fallback to hard-refresh.

Reproduction

https://github.com/eccentric-j/cra-reload-repro

1. Run npx create-react-app reload
2. Run yarn start
3. Open the page in your browser
4. Change content in App.js
5. Look at the page again in browser

Expected

Ideally it would be intelligent enough to see the code is not performing any side-effects against the non-react export and apply the update. 🙂

Given that the intention is to ensure safety and since it doesn’t know if any side-effects are caused, it therefore will not apply any updates then I expect it to hard-refresh the page.

If it can’t apply the updates then I expect to see some logging info that fast-refresh could not apply the update and is hard-refreshing. Ideally if it can’t hard-refresh, maybe some insight about that so one knows where to begin looking.

Actual

Changing App.js does not apply the updates and it also does NOT hard-refresh. The network tab indicates the WebSocket data was received so it is not a seemingly a plumbing issue.

Environment

Reproduced on Safari and Brave.

[pmmmwh]

See facebook/create-react-app#11105 - this is an issue upstream.

[jaidetree]

Thanks for your work @pmmmwh it’s really appreciated 🙂