Try integrating into Create React App

[gaearon]

I've tried integrating this into an ejected CRA project but got stuck (#6).

This gets me thinking: perhaps, the next milestone is to get it to a point where we can create a pull request for CRA? What's missing for that to work? cc @iansu

[iansu]

I would love to get this into Create React App. If there's anything needed on our end (other than installing and using the plugin) please let me know.

[Ericnr]

Would be great to see this being implemented without ejecting from CRA too, using Craco or React-App-Rewired.

[gaearon]

Yes, that’s what I’m referring to by “creating a pull request for CRA” 🙂 that was the goal all along.

[pmmmwh]

I've tried integrating this into an ejected CRA project but got stuck (#6).

This gets me thinking: perhaps, the next milestone is to get it to a point where we can create a pull request for CRA? What's missing for that to work? cc @iansu

To my knowledge, most of the work have to be done here:

1. Allow custom error overlay and alter react error overlay/the API needed here
2. Fix assumptions when sniffing Babel/Webpack, since CRA does not use webpack's mode argument
3. Need to try come up with an integration with the Webpack socket situation (related Does the error overlay websocket need a ping heartbeat? #9 ), and also make this work with servers under proxy/custom paths)

[gaearon]

Could Babel detection be failing because the injected module doesn’t have a path that matches files going though Babel? Like usually people limit it to their source directory.

[pmmmwh]

Could Babel detection be failing because the injected module doesn’t have a path that matches files going though Babel? Like usually people limit it to their source directory.

Yes exactly. People often ignore node_modules so the injected module does not get processed, thus yielding high percentage of false positives.

[esetnik]

Based on the suggestion by @drather19 I have published a customize-cra plugin to make it easier. See esetnik/customize-cra-react-refresh.

[bugzpodder]

I tested this with mostly a CRA 3.3.0 build and got a few issues:

1. Got the same error in Use safeThis function in cleanup phase instead of "window" to better support web workers #29 and that fix worked for me.
2. The first change always refreshes the page for some reason. subsequent changes doesn't.
3. After a bit I get "The development server has disconnected.
   Refresh the page if necessary. " then if I make a change nothing happens (page doesn't refresh/update). This seem to happen without this plugin so likely unrelated. react-scripts 3.3.0 - "The development server has disconnected. Refresh the page if necessary" facebook/create-react-app#8203
4. disableRefreshCheck had to be enabled otherwise I get a bunch of warnings BabelDetectComponent logic doesn't work for consumers #15
5. the new error overlay seem to fight over the CRA error overlay. After I make a syntax error I can't get the new error overlay to go away. Suggestion: Don't display error iframe #28

[jimmyn]

I'm using craco with configurations from this codesandbox example and it seems to be working fine, but I'm also fighting with duplicated error overlays - #28

[charrondev]

Edit: Previously I thought I had everything working. I was wrong, swapping back to the stock client actually prevented the refreshing form working at all.

I got this working in my CRA by

• Ejecting.
• Applying the babel and webpack plugin w/ disableRefreshCheck.

I do get the duplicate overlay thing, but haven't experienced the other issues described by @bugzpodder.

[charrondev]

After playing with it a little bit, I did a quick fork of the react-dev-utils/webpackHotDevClient. This removes all the error & warning handling.

https://gist.github.com/charrondev/c06cd5a9616a1d1a0db45de6f10b592b#file-webpackhotdevclient-js

If this is used instead of the react-dev-utils one I find

• There are no duplicate errors.
• Errors properly dismiss after being fixed.

Update

I created a PR adding this to cra-kitchen-sink example. #41

PR over on CRA as well. facebook/create-react-app#8582 If that merges sooner than #41 then I can replace #41 with a simple README update to state it's built in to some future version of CRA.