Proof of concept: simple hot reloading by gaearon · Pull Request #2304 · facebook/create-react-app

gaearon · 2017-05-21T01:15:36Z

Couldn't resist. Integrated with our error handling. (So errors cause refresh on next save.)

~~This would need a Babel transform, for now I just hardcoded what it would do~~
~~Only works if you have DevTools installed/enabled~~
This is annoying Updating app.js causes webpack dev server to report error and then reload the page #1880
Editing after initial error should refresh
Editing after compile error should still be hot
Chrome sourcemaps don't update Hot reloading doesn't update Chrome sourcemaps #2407
TESTS
"Click to source" breaks in overlay because after first edit, path looks like ./packages/react-scripts/template/src/Logo.js?989a:5. Need to figure out where that ?989a comes from, it doesn't make sense (all edits after the first one get that name in Sources pane). Even changing devtoolFallbackModuleFilenameTemplate to repeat devtoolModuleFilenameTemplate didn't help: webpack still tries to give different source names to the same file on first reload.

I only want to enable this for files that export a single functional component defined with JSX.
The goal is not to be comprehensive but to always work well, and create trust.

Timer · 2017-05-23T05:40:02Z

Details

Per request, I made the babel plugin. I've never made one before so I dunno if I did things wrong, but it works. 🤷‍♀️

You might need to wipe your babel caches (echo y | ./node_modules/.bin/lerna clean && npm install); they don't play well with hot reloading.
I had to add a safety check in there (typeof data.acceptNext === 'function') which prevents the caches from causing runtime errors when funky things happen.

Turning off cacheDirectory fixes the glitches. Maybe it'll work better with cache-loader.

Here's what I mean by the caches act weird, notice it not swapping back to an older component after save / hard refreshing next:

Works as desired with cacheDirectory off:

gaearon · 2017-05-23T14:25:12Z

This is simpler to do with "templates".

Timer · 2017-05-23T17:09:02Z

Code has been updated to use babel-template and now highlights nodes that are reloaded.

marcofugaro · 2017-07-14T20:59:25Z

That looks nice! Did you have more time to work on it?

Timer · 2017-07-14T21:28:52Z

@marcofugaro we're currently waiting on some browser bugs to be fixed.

rvion · 2017-08-13T17:31:47Z

we're currently waiting on some browser bugs to be fixed.

still waiting ?

bestwestern · 2017-10-18T17:09:41Z

Could someone please explain how to get HMR (even though it may still be a bit buggy)

We should not support it since by default it's an aggressive and flaky HMR handler. Where it says it can handle more file changes than it actually can. Developers usually learn not to trust it and refresh manually. It also breaks JS error handling in arrow functions: gaearon/react-proxy#76 After this change, HMR is still properly configured, including the module.hot api and client/server communications. By default JS changes refresh and CSS changes appear without refresh. For the future, we should monitor the progress of this PR: facebook/create-react-app#2304

ro-savage · 2018-01-18T14:45:15Z

Hopefully @aslushnikov will be able to updated on the source map bug in Chrome DevTools. Once thats fixed it should be ready to merge.

aslushnikov · 2018-01-22T22:23:51Z

@ro-savage: the fix for crbug.com/438251 has landed and will be available on tomorrow's Canary.

gaearon · 2018-01-22T22:50:50Z

This is amazing, thank you @aslushnikov!

We should start getting this up to date.

onpaws · 2018-03-12T18:12:35Z

Curious, is this working now?
What needs to happen to close #2407?

Happy to help if someone can please point me in the right direction.

mnemanja · 2018-04-11T10:54:10Z

Hi @gaearon, any news regarding the hot reloading integration progress?

gaearon · 2018-05-11T18:48:27Z

There are things with higher priority that are currently being worked on and are blockers for v2.
This one is not a blocker. I think it'll get in this year though.

eddiemonge · 2018-10-25T18:21:27Z

@gaearon this still on track for this year?

stale · 2018-11-24T19:17:20Z

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

gausie · 2018-11-24T21:33:36Z

Please bot do not stale 🙏🤖

ahmad2smile · 2018-11-28T11:12:04Z

Fingers crossed 🤞

lstkz · 2019-03-26T07:47:06Z

This is the most annoying to me "Editing after compile error should still be hot".
Related to #6694

gaearon · 2019-06-15T13:00:28Z

Ok so I have something you can try.

https://twitter.com/dan_abramov/status/1139876172903395329

https://twitter.com/dan_abramov/status/1139699841204809729 (But use 0.0.5 rather than 0.0.3)

mrmckeb · 2019-07-24T17:40:06Z

Closing in favour of #5958.

facebook-github-bot added the CLA Signed label May 21, 2017

gaearon mentioned this pull request May 21, 2017

Status/Roadmap of the project gaearon/react-hot-boilerplate#97

Closed

gaearon commented May 23, 2017

View reviewed changes

Comment thread packages/babel-plugin-react-app/index.js Outdated

Copy link
Copy Markdown

Contributor Author

gaearon May 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is simpler to do with "templates".

gaearon mentioned this pull request May 29, 2017

Hot reloading doesn't update Chrome sourcemaps #2407

Closed

insin mentioned this pull request May 30, 2017

hot-reload doesn't work with nwb/express insin/nwb#287

Closed

4 tasks

Timer mentioned this pull request Jul 20, 2017

Hot reload doesn't work microsoft/TypeScript-React-Starter#50

Open

zikaari mentioned this pull request Sep 22, 2017

[Feature] Have a special flag to enable experimental features #3170

Closed

This was referenced Sep 29, 2017

HMR is not working out of box (does a full page refresh) #3215

Closed

Dismiss full page reload after fixing compile errors #2217

Closed

This was referenced Oct 1, 2017

Allow runtimeCaching option without ejecting #3137

Closed

Extract service worker registration code #2638

Closed

frenzzy mentioned this pull request Oct 3, 2017

Improve developer experience; update react-error-overlay kriasoft/react-starter-kit#1421

Merged

jcrben mentioned this pull request Nov 6, 2017

Enabling webpack hot module reloading? wmonk/create-react-app-typescript#118

Closed

Timer mentioned this pull request Jan 18, 2018

Roadmap for react-scripts@2.0 #3815

Closed

Timer mentioned this pull request Jan 20, 2018

Support - HMR / hot-reloading #3871

Closed

csepulv mentioned this pull request Feb 7, 2018

CSS hotreload csepulv/electron-with-create-react-app#18

Closed

Proof of concept: hot reloading

f7ae403

gaearon added 4 commits May 11, 2018 19:59

Remove noisy connection message and add logs

bf7b87a

Better message

42511c7

Fix bad merge

31d5eca

Update

2d8eb24

gaearon force-pushed the hot-reloading-poc branch from ff00a57 to 2d8eb24 Compare May 11, 2018 20:08

gaearon changed the base branch from master to next May 11, 2018 20:08

Merge branch 'next' into hot-reloading-poc

b5f165d

nickserv mentioned this pull request Jul 4, 2018

Include module.hot.accept in template or docs for HMR #4732

Closed

Timer closed this Sep 26, 2018

Timer reopened this Sep 26, 2018

Merge branch 'master' into hot-reloading-poc

ff71d79

Timer changed the base branch from next to master October 19, 2018 15:44

format

abe07e9

stale Bot added the stale label Nov 24, 2018

stale Bot removed the stale label Nov 24, 2018

Timer added the tag: new feature label Nov 24, 2018

Timer added this to the 3.0 milestone Nov 24, 2018

iansu modified the milestones: 3.0, 3.x Mar 10, 2019

amyrlam force-pushed the master branch from cecd762 to d3b19f9 Compare March 24, 2019 20:42

lstkz mentioned this pull request Mar 26, 2019

HMR not working when fixing errors #6694

Closed

mrmckeb closed this Jul 24, 2019

lock Bot locked and limited conversation to collaborators Jul 29, 2019

Uh oh!

Conversation

gaearon commented May 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Timer commented May 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaearon May 23, 2017

Choose a reason for hiding this comment

Uh oh!

Timer commented May 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marcofugaro commented Jul 14, 2017

Uh oh!

Timer commented Jul 14, 2017

Uh oh!

rvion commented Aug 13, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bestwestern commented Oct 18, 2017

Uh oh!

ro-savage commented Jan 18, 2018

Uh oh!

aslushnikov commented Jan 22, 2018

Uh oh!

gaearon commented Jan 22, 2018

Uh oh!

onpaws commented Mar 12, 2018

Uh oh!

mnemanja commented Apr 11, 2018

Uh oh!

gaearon commented May 11, 2018

Uh oh!

eddiemonge commented Oct 25, 2018

Uh oh!

stale Bot commented Nov 24, 2018

Uh oh!

gausie commented Nov 24, 2018

Uh oh!

ahmad2smile commented Nov 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lstkz commented Mar 26, 2019

Uh oh!

gaearon commented Jun 15, 2019

Uh oh!

mrmckeb commented Jul 24, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

16 participants

gaearon commented May 21, 2017 •

edited

Loading

Timer commented May 23, 2017 •

edited

Loading

Timer commented May 23, 2017 •

edited

Loading

rvion commented Aug 13, 2017 •

edited

Loading

ahmad2smile commented Nov 28, 2018 •

edited

Loading