React-Hot-Loader: react-🔥-dom patch is not detected.

[adriatic]

Description

Even the simplest Gatsby application fails with this error message:

React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.
AppContainer @ react-hot-loader.development.js:2375

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

I followed the instructions at https://www.gatsbyjs.org/tutorial/part-zero/#create-a-gatsby-site

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

λ gatsby info --clipboard

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.4 - /c/Python38/python
  Browsers:
    Chrome: 84.0.4147.89
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^2.24.11 => 2.24.11
  npmGlobalPackages:
    gatsby-cli: 2.12.65


 ERROR

I am not sure what is the meaning of the ERROR indicator (last data item in running gatsby info --clipboard

[adriatic]

The above is the simplest way to see this problem - it happens any other more complex scenario I tried, as well

[herecydev]

Hey Nikolaj, there is already an issue created for this here: #11934 so going to close this one as a duplicate!

[adriatic]

Thanks @herecydev for such quick response. The thread you cited is amongst the longer ones I read. Even after reading it, I am not sure what is the resolution (other than a few suggestions proposing a workaround

I am assuming that the #11934 remains open.

[herecydev]

No worries, have you tried this solution from Ward: #11934 (comment)

[adriatic]

I did not - and I believe that it works. I am not a friend of using workarounds as it is likely I will keep it forever, forgetting what it was about 😺

[herecydev]

In this case "fast-refresh" is the replacement for hot-loader. Lots of information here: facebook/react#16604

Hope that helps!

[adriatic]

Perfect, you are very helpful, Dan

[adriatic]

Hoping that this following feedback might help to create a succinct recipe for using either @wardpeet's comment, or using "fast refresh" here is my take:

I am coming from an attempt to write a tutorial on the architecture of full-stack apps, using a variety of front end frameworks paired with a variety of back end app, one pair being [gatsby, strapi]. So my interest was the communication between these two components and since I realized that I nearly completely forgot how to use Gatsby, I wanted to go through Gatsby tutorials. Alas, after building the most trivial Gatsby app, I run into [this issue(https://github.com//issues/26021#issue-665596958) I reported one hour ago.

So, I tried to distill the solution for my problem (note, I hate error message in the Browser's console, a most often there are more than one problem indicators and it takes time to decode what is going on; so I a very anxious not to have errors in the console).

Example: @wardpeet's comment suggests using GATSBY_HOT_LOADER=fast-refresh without saying where this setting "lives". I do not believe that I can set it in the use case scenario I presented above, as webpack.config is not used (AFAIK)

Should How to Set Up Hot Module Replacement with React? be the best source of information for people like me (who like Gatsby but do not have the desire to build it)?

[adriatic]

@herecydev - how about using react-hot-loader instead of the standard creation of Gatsby (React) app: gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world? That way I will have all of the configuration files that react-hot-loader needs