fix(gatsby): workaround some webpack issues causing first save after running gatsby develop to not have any effect (#30193)

* fix(gatsby): wokraround some webpack issues causing first save after running gatsby develop to not have any effect

* adjust unit tests to mock extra fs method

* Update packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts

Co-authored-by: Vladimir Razuvaev <[email protected]>

* format

Co-authored-by: Vladimir Razuvaev <[email protected]>

Author: pieh

packages/gatsby/src/bootstrap/__tests__/requires-writer.js

@@ -20,6 +20,7 @@ const generatePagesState = pages => {
 jest.mock(`fs-extra`, () => {
   return {
     writeFile: () => Promise.resolve(),
+    outputFileSync: () => {},
     move: () => {},
   }
 })

packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts

@@ -1,5 +1,6 @@
 import VirtualModulesPlugin from "webpack-virtual-modules"
 import * as path from "path"
+import * as fs from "fs-extra"
 /*
  * This module allows creating virtual (in memory only) modules / files
  * that webpack compilation can access without the need to write module
@@ -46,6 +47,10 @@ export function writeModule(filePath: string, fileContents: string): void {
     return
   }
 
+  // workaround webpack marking virtual modules as deleted because those files don't really exist
+  // so we create those files just so watchpack doesn't mark them as initially missing
+  fs.outputFileSync(adjustedFilePath, fileContents)
+
   fileContentLookup[adjustedFilePath] = fileContents
 
   instances.forEach(instance => {

packages/gatsby/src/utils/start-server.ts

@@ -78,6 +78,11 @@ export async function startServer(
   })
   webpackActivity.start()
 
+  // loading indicator
+  // write virtual module always to not fail webpack compilation, but only add express route handlers when
+  // query on demand is enabled and loading indicator is not disabled
+  writeVirtualLoadingIndicatorModule()
+
   const THIRTY_SECONDS = 30 * 1000
   let cancelDevJSNotice: CancelExperimentNoticeCallbackOrUndefined
   if (
@@ -486,10 +491,6 @@ module.exports = {
     route({ app, program, store })
   }
 
-  // loading indicator
-  // write virtual module always to not fail webpack compilation, but only add express route handlers when
-  // query on demand is enabled and loading indicator is not disabled
-  writeVirtualLoadingIndicatorModule()
   if (
     process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
     process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`