Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #11087
Closed
Open
Issue created Jun 11, 2021 by Administrator@rootContributor

[BUG]: Multiple exports break hot reloading

Created by: eccentric-j

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!

Assignee
Assign to
Time tracking