fix(gatsby): update async requires in dev loader (#32189)

* add failing e2e test

* change test setup to not be flaky with retries

* fix stale asyncRequires in dev loader

Author: vladar

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

@@ -1,3 +1,16 @@
+describe(`client-side navigation to the new page`, () => {
+  before(() => {
+    cy.visit(`/`).waitForRouteChange()
+    cy.exec(`npm run update -- --file src/pages/new-page.js`)
+    cy.wait(1000)
+  })
+
+  it(`can navigate to newly created page using link`, () => {
+    cy.findByTestId(`hot-reloading-new-file`).click().waitForRouteChange()
+    cy.getTestElement(`message`).invoke(`text`).should(`contain`, `Hello`)
+  })
+})
+
 describe(`hot reloading new page component`, () => {
   before(() => {
     cy.exec(`npm run update -- --file src/pages/sample.js`)

e2e-tests/development-runtime/src/pages/index.js

@@ -44,6 +44,9 @@ const IndexPage = ({ data }) => (
     >
       Go to client route splat (splat: blah/blah/blah)
     </Link>
+    <Link to="/new-page" data-testid="hot-reloading-new-file">
+      Created by hot-reloading/new-file.js
+    </Link>
     <h2>Blog posts</h2>
     <ul>
       {data.posts.edges.map(({ node }) => (

packages/gatsby/cache-dir/app.js

@@ -22,11 +22,14 @@ import "./blank.css"
 // Enable fast-refresh for virtual sync-requires, gatsby-browser & navigation
 // To ensure that our <Root /> component can hot reload in case anything below doesn't
 // satisfy fast-refresh constraints
-module.hot.accept([
-  `$virtual/async-requires`,
-  `./api-runner-browser`,
-  `./navigation`,
-])
+module.hot.accept(
+  [`$virtual/async-requires`, `./api-runner-browser`, `./navigation`],
+  () => {
+    // asyncRequires should be automatically updated here (due to ESM import and webpack HMR spec),
+    // but loader doesn't know that and needs to be manually nudged
+    loader.updateAsyncRequires(asyncRequires)
+  }
+)
 
 window.___emitter = emitter
 

packages/gatsby/cache-dir/dev-loader.js

@@ -26,20 +26,21 @@ function mergePageEntry(cachedPage, newPageData) {
 class DevLoader extends BaseLoader {
   constructor(asyncRequires, matchPaths) {
     const loadComponent = chunkName => {
-      if (!asyncRequires.components[chunkName]) {
+      if (!this.asyncRequires.components[chunkName]) {
         throw new Error(
           `We couldn't find the correct component chunk with the name "${chunkName}"`
         )
       }
 
       return (
-        asyncRequires.components[chunkName]()
+        this.asyncRequires.components[chunkName]()
           .then(preferDefault)
           // loader will handle the case when component is error
           .catch(err => err)
       )
     }
     super(loadComponent, matchPaths)
+    this.asyncRequires = asyncRequires
 
     const socket = getSocket()
 
@@ -60,6 +61,10 @@ class DevLoader extends BaseLoader {
     }
   }
 
+  updateAsyncRequires(asyncRequires) {
+    this.asyncRequires = asyncRequires
+  }
+
   loadPage(pagePath) {
     const realPath = findPath(pagePath)
     return super.loadPage(realPath).then(result => {