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 <vladimir.razuvaev@gmail.com> * format Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
gatsbyjs · Mar 11, 2021 · a9d65f6 · a9d65f6
1 parent 14da60a
commit a9d65f6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/gatsby/src/bootstrap/__tests__/requires-writer.js b/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: () => {},
   }
 })

diff --git a/packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts b/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 => {

diff --git a/packages/gatsby/src/utils/start-server.ts b/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`