Try integrating into Create React App #7

gaearon · 2019-12-06T20:24:04Z

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 · 2019-12-06T23:04:24Z

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 · 2019-12-06T23:24:44Z

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

gaearon · 2019-12-07T00:53:22Z

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

pmmmwh · 2019-12-07T08:51:59Z

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:

Allow custom error overlay and alter react error overlay/the API needed here
Fix assumptions when sniffing Babel/Webpack, since CRA does not use webpack's mode argument
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 · 2019-12-19T01:20:02Z

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 · 2019-12-19T04:41:41Z

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 · 2020-01-08T16:00:05Z

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

bugzpodder · 2020-01-14T00:09:57Z

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

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.
The first change always refreshes the page for some reason. subsequent changes doesn't.
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
disableRefreshCheck had to be enabled otherwise I get a bunch of warnings BabelDetectComponent logic doesn't work for consumers #15
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 · 2020-01-14T16:42:03Z

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 · 2020-02-29T00:33:29Z

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 · 2020-02-29T00:53:53Z

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.

pmmmwh · 2020-04-07T21:11:58Z

facebook/create-react-app#8582 has been merged, but some API naming work still has to be done so I'll leave this open.

thoamsy · 2020-04-21T06:51:48Z

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

I also use craco, but I am get the another error。The console says

Uncaught ReferenceError: $RefreshReg$ is not defined
at Object../node_modules/events/events.js (events.js:447)
at webpack_require (bootstrap:806)
at fn (bootstrap:167)
at Object../node_modules/webpack/hot/emitter.js (emitter.js:1)
at webpack_require (bootstrap:806)

pmmmwh · 2020-04-23T19:29:55Z

I also use craco, but I am get the another error

Did you include the Babel plugin in your config? I won't be able to help unless there is a reproducible example.

thoamsy · 2020-04-24T07:12:33Z

Did you include the Babel plugin in your config? I won't be able to help unless there is a reproducible example.

Thank you, I will try to provide an example for you.

thoamsy · 2020-04-24T08:25:19Z

It ’s weird, my project will report an error, but when I wrote a minimal demo using craco, it worked very well.

bugzpodder · 2020-04-24T18:01:00Z

It ’s weird, my project will report an error, but when I wrote a minimal demo using craco, it worked very well.

do you have an example where i can test as well? i recently had tried to apply to a project but couldn't get it to work.

thoamsy · 2020-04-26T03:33:05Z

do you have an example where i can test as well? i recently had tried to apply to a project but couldn't get it to work.

This is my demo for test the hot reload, it works very well. But I can't bring it to my project.

bugzpodder · 2020-04-26T08:04:35Z

@thoamsy craco didn't work for me (got $RefreshReg$ error), however I tried https://dutzi.party/react-fast-refresh/ and it worked better

pmmmwh · 2020-04-26T11:33:38Z

@thoamsy @bugzpodder
I'm not sure what broke for you guys, but I am able to get the plugin working with craco. Here is a CodeSandbox demonstrating this (Notice the use of whenDev, that is important because the plugin do not inject required runtime code in non-dev modes, and will cause the Babel plugin to break builds because of missing globals).

I won't be able to help without more insights into the specific setups for your apps, or with more debugging information.

thoamsy · 2020-04-26T13:15:39Z

@bugzpodder Do you mean that use react-app-rewired instead of craco can works well in your project?

thoamsy · 2020-04-26T13:18:15Z

@thoamsy @bugzpodder
I'm not sure what broke for you guys, but I am able to get the plugin working with craco. Here is a CodeSandbox demonstrating this (Notice the use of whenDev, that is important because the plugin do not inject required runtime code in non-dev modes, and will cause the Babel plugin to break builds because of missing globals).

Thank for your advice, but I think our problem is that the dev mode can't run 😂。Maybe I should try to use another tool instead of craco to let my project works 🤔

bugzpodder · 2020-04-26T16:05:38Z

@thoamsy yes, but react-app-rewired just modifies your webpack config like craco so you can get it to work with some modification I believe.

@pmmmwh that's because you are relying on codesandbox. I am doing it locally on a mac. Just goto your codesandbox, download it as ZIP, install it locally, add your plugin (0.3.0-beta.5) and yarn start it. I always only used yarn start so whenDev didn't really matter.

pmmmwh · 2020-04-27T08:46:44Z

@thoamsy @bugzpodder
So I did some debugging, it seems that the issue here is related to dilanx/craco#36 and dilanx/craco#49 .

The problem is that this plugin by default don't process files within node_modules, but craco will apply react-refresh/babel unconditionally to both instances of babel-loader, thus breaking all JS files within node_modules.

To solve this, other than requesting a proper fix on craco's side, you can manually inject the Babel plugin as follows:

const { whenDev } = require('@craco/craco');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      whenDev(() => {
        const babelLoaderRule = webpackConfig.module.rules
          .find((x) => Array.isArray(x.oneOf))
          .oneOf.find(
            (x) =>
              x.loader &&
              x.loader.includes('babel-loader') &&
              x.options &&
              x.options.presets &&
              x.options.presets.some((p) => p.includes('babel-preset-react-app'))
          );

        babelLoaderRule.options.plugins.push(require.resolve('react-refresh/babel'));
      });

      return webpackConfig;
    },
    plugins: [
      ...whenDev(
        () => [
          new ReactRefreshWebpackPlugin({
            // Proper setup for this would require the new unpublished version of CRA.
            // We'll disable the integration for now.
            overlay: false,
          }),
        ],
        []
      ),
    ],
  },
};

I have updated the example for craco here.

thoamsy · 2020-04-28T12:02:50Z

@pmmmwh It works! Thank you for your effort to solve this problem, it's amazing!

kelly-tock · 2020-05-13T11:37:06Z

Is this released already with CRA? I don’t see the env variable mentioned in the PR in the documentation

deftomat · 2020-05-13T15:29:00Z

@kelly-tock Yes, it is. Use FAST_REFRESH env variable.

https://github.com/facebook/create-react-app/blob/c5b96c2853671baa3f1f297ec3b36d7358898304/packages/react-scripts/config/env.js#L100

gaearon · 2020-05-13T15:31:04Z

Note there are some pending fixes that haven't made into CRA version yet.

pmmmwh · 2020-05-13T17:41:54Z

Is this released already with CRA?

It's on the master branch, but they haven't released a new version with the experimental support.

kelly-tock · 2020-05-13T17:51:19Z

@pmmmwh that's exactly what I was asking. thanks!

xyy94813 · 2020-07-23T09:48:15Z

I am using react-hot-loader with CRA.
But i got some problems when i use code splitting.
So, i am looking for a new solution.

If i want to use it with CRA now.
Is it the best option to use esetnik/customize-cra-react-refresh and then remove it after the CRA published?

pmmmwh · 2020-07-23T11:53:55Z

Is it the best option to use esetnik/customize-cra-react-refresh and then remove it after the CRA published?

It depends on your setup, e.g. if you're using any rewire tools. I would suggest you take a look at the examples/create-react-app folder, then if you really don't want to bother you can move on with the rewire plugin.

Saibamen · 2020-10-24T15:10:23Z

Fixed - released in CRA 4.0.0: https://github.com/facebook/create-react-app/releases

pmmmwh mentioned this issue Dec 7, 2019

Question RE: adding/removing hooks... #4

Closed

pmmmwh mentioned this issue Dec 22, 2019

Get websocket port from document.currentScript if possible #30

Closed

This was referenced Feb 29, 2020

Fix CRA error overlay clashing with fast-refresh overlay #41

Closed

Add experimental react-refresh support facebook/create-react-app#8582

Merged

pmmmwh mentioned this issue Mar 1, 2020

feat(overlay): allow full customization of the error overlay integration #44

Merged

n8io mentioned this issue May 14, 2020

🚸 Add Fast Refresh to improve DX n8io/boilerplate-monorepo#163

Closed

amcsi mentioned this issue Aug 11, 2020

How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader? facebook/react#16604

Closed

pmmmwh closed this as completed Oct 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try integrating into Create React App #7

Try integrating into Create React App #7

gaearon commented Dec 6, 2019

iansu commented Dec 6, 2019

Ericnr commented Dec 6, 2019

gaearon commented Dec 7, 2019

pmmmwh commented Dec 7, 2019

gaearon commented Dec 19, 2019

pmmmwh commented Dec 19, 2019

esetnik commented Jan 8, 2020

bugzpodder commented Jan 14, 2020 •

edited

jimmyn commented Jan 14, 2020

charrondev commented Feb 29, 2020 •

edited

charrondev commented Feb 29, 2020 •

edited

pmmmwh commented Apr 7, 2020

thoamsy commented Apr 21, 2020

pmmmwh commented Apr 23, 2020

thoamsy commented Apr 24, 2020 •

edited

thoamsy commented Apr 24, 2020

bugzpodder commented Apr 24, 2020

thoamsy commented Apr 26, 2020 •

edited

bugzpodder commented Apr 26, 2020

pmmmwh commented Apr 26, 2020 •

edited

thoamsy commented Apr 26, 2020

thoamsy commented Apr 26, 2020

bugzpodder commented Apr 26, 2020

pmmmwh commented Apr 27, 2020 •

edited

thoamsy commented Apr 28, 2020

kelly-tock commented May 13, 2020

deftomat commented May 13, 2020 •

edited

gaearon commented May 13, 2020

pmmmwh commented May 13, 2020 •

edited

kelly-tock commented May 13, 2020

xyy94813 commented Jul 23, 2020

pmmmwh commented Jul 23, 2020

Saibamen commented Oct 24, 2020 •

edited

Try integrating into Create React App #7

Try integrating into Create React App #7

Comments

gaearon commented Dec 6, 2019

iansu commented Dec 6, 2019

Ericnr commented Dec 6, 2019

gaearon commented Dec 7, 2019

pmmmwh commented Dec 7, 2019

gaearon commented Dec 19, 2019

pmmmwh commented Dec 19, 2019

esetnik commented Jan 8, 2020

bugzpodder commented Jan 14, 2020 • edited

jimmyn commented Jan 14, 2020

charrondev commented Feb 29, 2020 • edited

charrondev commented Feb 29, 2020 • edited

pmmmwh commented Apr 7, 2020

thoamsy commented Apr 21, 2020

pmmmwh commented Apr 23, 2020

thoamsy commented Apr 24, 2020 • edited

thoamsy commented Apr 24, 2020

bugzpodder commented Apr 24, 2020

thoamsy commented Apr 26, 2020 • edited

bugzpodder commented Apr 26, 2020

pmmmwh commented Apr 26, 2020 • edited

thoamsy commented Apr 26, 2020

thoamsy commented Apr 26, 2020

bugzpodder commented Apr 26, 2020

pmmmwh commented Apr 27, 2020 • edited

thoamsy commented Apr 28, 2020

kelly-tock commented May 13, 2020

deftomat commented May 13, 2020 • edited

gaearon commented May 13, 2020

pmmmwh commented May 13, 2020 • edited

kelly-tock commented May 13, 2020

xyy94813 commented Jul 23, 2020

pmmmwh commented Jul 23, 2020

Saibamen commented Oct 24, 2020 • edited

bugzpodder commented Jan 14, 2020 •

edited

charrondev commented Feb 29, 2020 •

edited

charrondev commented Feb 29, 2020 •

edited

thoamsy commented Apr 24, 2020 •

edited

thoamsy commented Apr 26, 2020 •

edited

pmmmwh commented Apr 26, 2020 •

edited

pmmmwh commented Apr 27, 2020 •

edited

deftomat commented May 13, 2020 •

edited

pmmmwh commented May 13, 2020 •

edited

Saibamen commented Oct 24, 2020 •

edited