[BUG]: Multiple exports break hot reloading

[jaidetree]

Describe the bug

When a component file contains more than one export, CRA cannot hot-reload it.

Did you try recovering your dependencies?

Yes, experienced it on our work repo. Reproduced it in another person's test reproduction repo who ran into it, and then moments ago created a brand new create-react-app app and reproduced the issue again.

Which terms did you search for in User Guide?

• Multiple exports found https://create-react-app.dev/docs/importing-a-component/#dangerbuttonjs which doesn't mention anything about an issue like this
• Hot Module Replacement
• Hot Reloading
• Fast Reload
• Reloading

Environment

>  npx create-react-app --info

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/j/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.3
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Run npx create-react-app cra-reload-repro
2. Open App.js and add this to the very bottom export const x = 5. Doesn't seem to matter what is exported.
3. Run yarn start
4. View in browser
5. Edit App.js and change some text, maybe a single word
6. Save changes to App.js

Expected behavior

The module is sent via WebSocket to the browser and then the update is applied so the text changes on-screen.

Actual behavior

The module is sent via WebSocket (confirmed in network tab of inspector), but the update is not applied. The text does not change on-screen.

Reproducible demo

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

1. Clone the repo
2. Run yarn start
3. Open page in browser
4. Change some text in App.js
5. Save App.js

Notes

If I should report this to another package or github repo, please point the way!

[jaidetree]

Took a break, did more research, and a bit of discussion I realized this was not a plumbing issue between react and hot-reload, that has been replaced with fast-refresh. It by design will not apply the changes if there are non-React related exports. pmmmwh/react-refresh-webpack-plugin#249.