feat: remove react-hot-loader

.circleci/config.yml

@@ -334,14 +334,6 @@ jobs:
   e2e_tests_development_runtime:
     <<: *e2e_tests_development_runtime_alias
 
-  e2e_tests_development_runtime_fast_refresh:
-    <<: *e2e_tests_development_runtime_alias
-    environment:
-      GATSBY_HOT_LOADER: fast-refresh
-      CYPRESS_HOT_LOADER: fast-refresh
-      CYPRESS_PROJECT_ID: 917bea
-      CYPRESS_RECORD_KEY: 4750fb36-4576-4638-a617-d243a381acef
-
   e2e_tests_development_runtime_with_experimental_react:
     <<: *e2e_tests_development_runtime_alias
 
@@ -627,8 +619,6 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
-      - e2e_tests_development_runtime_fast_refresh:
-          <<: *e2e-test-workflow
       - e2e_tests_production_runtime:
           <<: *e2e-test-workflow
       - themes_e2e_tests_production_runtime:

docs/docs/conceptual/gatsby-lifecycle-apis.md

@@ -44,7 +44,7 @@ During the main bootstrap sequence, Gatsby (in this order):
 - writes page redirects (if any) to `.cache/redirects.json`
 - the [onPostBootstrap](/docs/reference/config-files/gatsby-node/#onPostBootstrap) lifecycle is executed
 
-In development this is a running process powered by [webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-hot-loader`](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L104), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded.
+In development this is a running process powered by [webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-refresh`](https://github.com/gatsbyjs/gatsby/blob/4dff7550a29f4635bf47a068a05f634470eb9ef1/packages/gatsby/package.json#L134)), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded.
 
 The core of the bootstrap process is the "api-runner", which helps to execute APIs in sequence, with state managed in Redux. Gatsby exposes a number of lifecycle APIs which can either be implemented by you (or any of your configured plugins) in `gatsby-node.js`, `gatsby-browser.js` or `gatsby-ssr.js`.
 

e2e-tests/development-runtime/cypress/integration/eslint-rules/limited-exports-page-templates.js

@@ -1,21 +1,19 @@
-if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
-  describe(`limited-exports-page-templates`, () => {
-    // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
-    it.skip(`should log warning to console for invalid export`, () => {
-      cy.visit(`/eslint-rules/limited-exports-page-templates`, {
-        onBeforeLoad(win) {
-          cy.stub(win.console, "log").as(`consoleLog`)
-        },
-      }).waitForRouteChange()
+describe(`limited-exports-page-templates`, () => {
+  // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
+  it.skip(`should log warning to console for invalid export`, () => {
+    cy.visit(`/eslint-rules/limited-exports-page-templates`, {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "log").as(`consoleLog`)
+      },
+    }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(
-        `be.calledWithMatch`,
-        /15:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
-      )
-      cy.get(`@consoleLog`).should(
-        `not.be.calledWithMatch`,
-        /17:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
-      )
-    })
+    cy.get(`@consoleLog`).should(
+      `be.calledWithMatch`,
+      /15:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+    )
+    cy.get(`@consoleLog`).should(
+      `not.be.calledWithMatch`,
+      /17:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+    )
   })
-}
+})

e2e-tests/development-runtime/cypress/integration/eslint-rules/no-anonymous-exports-page-templates.js

@@ -1,29 +1,27 @@
-if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
-  describe(`no-anonymous-exports-page-templates`, () => {
-    // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
-    it.skip(`should log warning to console for arrow functions`, () => {
-      cy.visit(`/eslint-rules/no-anonymous-exports-page-templates`, {
-        onBeforeLoad(win) {
-          cy.stub(win.console, "log").as(`consoleLog`)
-        },
-      }).waitForRouteChange()
+describe(`no-anonymous-exports-page-templates`, () => {
+  // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
+  it.skip(`should log warning to console for arrow functions`, () => {
+    cy.visit(`/eslint-rules/no-anonymous-exports-page-templates`, {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "log").as(`consoleLog`)
+      },
+    }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(
-        `be.calledWithMatch`,
-        /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
-      )
-    })
-    it.skip(`should log warning to console for function declarations`, () => {
-      cy.visit(`/eslint-rules/no-anonymous-exports-page-templates-function`, {
-        onBeforeLoad(win) {
-          cy.stub(win.console, "log").as(`consoleLog`)
-        },
-      }).waitForRouteChange()
+    cy.get(`@consoleLog`).should(
+      `be.calledWithMatch`,
+      /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
+    )
+  })
+  it.skip(`should log warning to console for function declarations`, () => {
+    cy.visit(`/eslint-rules/no-anonymous-exports-page-templates-function`, {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "log").as(`consoleLog`)
+      },
+    }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(
-        `be.calledWithMatch`,
-        /Anonymous function declarations cause Fast Refresh to not preserve local component state./i
-      )
-    })
+    cy.get(`@consoleLog`).should(
+      `be.calledWithMatch`,
+      /Anonymous function declarations cause Fast Refresh to not preserve local component state./i
+    )
   })
-}
+})

e2e-tests/development-runtime/cypress/integration/hot-reloading/arrow-functions.js

@@ -19,6 +19,8 @@ describe(`hot-reloading anonymous arrow functions`, () => {
       `npm run update -- --file src/components/title.tsx --replacements "TITLE:${text}"`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(IDS.title).should(`have.text`, text)
   })
 })

e2e-tests/development-runtime/cypress/integration/hot-reloading/class-component.js

@@ -23,6 +23,8 @@ describe(`reloading class component`, () => {
       `npm run update -- --file src/components/class-component.js --replacements "CUSTOM_STATE:${value}"`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(`stateful-${TEST_ID}`).should(
       `have.text`,
       `Custom Message`

e2e-tests/development-runtime/cypress/integration/hot-reloading/hooks.js

@@ -1,16 +1,23 @@
 const COUNT_ID = `count`
+const amount = 100
 
 describe(`hot-reloading hooks`, () => {
   beforeEach(() => {
+    cy.exec(
+      `npm run update -- --file src/pages/hooks.js --replacements "count + ${amount}:count + 1" --exact`
+    )
+    cy.wait(1000)
+
     cy.visit(`/hooks`).waitForRouteChange()
   })
 
-  it.skip(`can update component`, () => {
-    const amount = 100
+  it(`can update component`, () => {
     cy.exec(
       `npm run update -- --file src/pages/hooks.js --replacements "count + 1:count + ${amount}" --exact`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(`increment`).click()
 
     cy.getTestElement(COUNT_ID).invoke(`text`).should(`eq`, `${amount}`)

e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js

@@ -18,12 +18,14 @@ describe(`hot reloading new page component`, () => {
   })
 
   it(`can hot reload a new page file`, () => {
+    cy.visit(`/sample`).waitForRouteChange()
+
     const text = `World`
     cy.exec(
       `npm run update -- --file src/pages/sample.js --replacements "REPLACEMENT:${text}"`
     )
 
-    cy.visit(`/sample`).waitForRouteChange()
+    cy.waitForHmr()
 
     cy.getTestElement(`message`).invoke(`text`).should(`eq`, `Hello ${text}`)
   })

e2e-tests/development-runtime/cypress/integration/hot-reloading/non-js-file.js

@@ -1,21 +1,33 @@
 const TEMPLATE = `SUB_TITLE`
 const TEST_ID = `sub-title`
+const message = `This is a sub-title`
 
 describe(`hot reloading non-js file`, () => {
   beforeEach(() => {
+    cy.exec(
+      `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${message}:%${TEMPLATE}%" --exact`
+    )
+    cy.wait(1000)
+
     cy.visit(`/2018-12-14-hello-world/`).waitForRouteChange()
+
+    cy.wait(1000)
   })
 
   it(`displays placeholder content on launch`, () => {
     cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
   })
 
-  it.skip(`hot reloads with new content`, () => {
-    const message = `This is a sub-title`
+  it(`hot reloads with new content`, () => {
+    cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
+
     cy.exec(
       `npm run update -- --file content/2018-12-14-hello-world.md --replacements "${TEMPLATE}:${message}"`
     )
 
+    // wati for socket.io to update
+    cy.wait(5000)
+
     cy.getTestElement(TEST_ID).invoke(`text`).should(`eq`, message)
   })
 })

e2e-tests/development-runtime/cypress/integration/hot-reloading/page-component.js

@@ -14,6 +14,8 @@ describe(`hot reloading page component`, () => {
       `npm run update -- --file src/pages/index.js --replacements "GATSBY_SITE:${text}"`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(TEST_ID).should(`contain.text`, text)
   })
 })

e2e-tests/development-runtime/cypress/integration/hot-reloading/page-queries.js

@@ -18,6 +18,8 @@ describe(`hot-reloading page queries`, () => {
       `npm run update -- --file src/pages/page-query.js --replacements "# %AUTHOR%:author" --exact`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(`hot`).invoke(`text`).should(`contain`, author)
   })
 })

e2e-tests/development-runtime/cypress/integration/hot-reloading/static-queries.js

@@ -29,6 +29,8 @@ describe(`hot-reloading static queries`, () => {
         `npm run update -- --file src/components/static-query/use-static-query/hot.js --replacements "# %AUTHOR%:author" --exact`
       )
 
+      cy.waitForHmr()
+
       cy.getTestElement(`use-static-query-hot`)
         .invoke(`text`)
         .should(`contain`, author)

e2e-tests/development-runtime/cypress/integration/hot-reloading/template-component.js

@@ -15,6 +15,8 @@ describe(`hot reloading template component`, () => {
       `npm run update -- --file src/templates/blog-post.js --replacements "${TEMPLATE}:${message}"`
     )
 
+    cy.waitForHmr()
+
     cy.getTestElement(TEST_ID).should(`have.text`, `Hello ${message}`)
   })
 })

e2e-tests/development-runtime/cypress/integration/navigation/linking.js

@@ -143,76 +143,36 @@ describe(`navigation`, () => {
     })
   })
 
-  if (Cypress.env("HOT_LOADER") !== `fast-refresh`) {
-    describe(`All location changes should trigger an effect (react-hot-loader)`, () => {
-      beforeEach(() => {
-        cy.visit(`/navigation-effects`).waitForRouteChange()
-      })
-
-      it(`should trigger an effect after a search param has changed`, () => {
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `Waiting for effect`
-        )
-        cy.findByTestId(`send-search-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `?message=searchParam`
-        )
-      })
-
-      it(`should trigger an effect after the hash has changed`, () => {
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `Waiting for effect`
-        )
-        cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
-      })
-
-      it(`should trigger an effect after the state has changed`, () => {
-        cy.findByTestId(`effect-message`).should(`have.text`, ``)
-        cy.findByTestId(`send-state-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `this is a message using the state`
-        )
-      })
-    })
-  }
-
   // TODO: Check if this is the correct behavior
-  if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
-    describe(`All location changes should trigger an effect (fast-refresh)`, () => {
-      beforeEach(() => {
-        cy.visit(`/navigation-effects`).waitForRouteChange()
-      })
-
-      it(`should trigger an effect after a search param has changed`, () => {
-        cy.findByTestId(`effect-message`).should(`have.text`, ``)
-        cy.findByTestId(`send-search-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `?message=searchParam`
-        )
-      })
-
-      it(`should trigger an effect after the hash has changed`, () => {
-        cy.findByTestId(`effect-message`).should(`have.text`, ``)
-        cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
-      })
-
-      it(`should trigger an effect after the state has changed`, () => {
-        cy.findByTestId(`effect-message`).should(`have.text`, ``)
-        cy.findByTestId(`send-state-message`).click().waitForRouteChange()
-        cy.findByTestId(`effect-message`).should(
-          `have.text`,
-          `this is a message using the state`
-        )
-      })
-    })
-  }
+  describe(`All location changes should trigger an effect (fast-refresh)`, () => {
+    beforeEach(() => {
+      cy.visit(`/navigation-effects`).waitForRouteChange()
+    })
+
+    it(`should trigger an effect after a search param has changed`, () => {
+      cy.findByTestId(`effect-message`).should(`have.text`, ``)
+      cy.findByTestId(`send-search-message`).click().waitForRouteChange()
+      cy.findByTestId(`effect-message`).should(
+        `have.text`,
+        `?message=searchParam`
+      )
+    })
+
+    it(`should trigger an effect after the hash has changed`, () => {
+      cy.findByTestId(`effect-message`).should(`have.text`, ``)
+      cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
+      cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
+    })
+
+    it(`should trigger an effect after the state has changed`, () => {
+      cy.findByTestId(`effect-message`).should(`have.text`, ``)
+      cy.findByTestId(`send-state-message`).click().waitForRouteChange()
+      cy.findByTestId(`effect-message`).should(
+        `have.text`,
+        `this is a message using the state`
+      )
+    })
+  })
 
   describe(`Route lifecycle update order`, () => {
     it(`calls onPreRouteUpdate, render and onRouteUpdate the correct amount of times on route change`, () => {