fix(gatsby): don't place virtual modules in node_modules directory

packages/gatsby/src/bootstrap/requires-writer.ts

@@ -8,7 +8,10 @@ import { match } from "@reach/router/lib/utils"
 import { joinPath } from "gatsby-core-utils"
 import { store, emitter } from "../redux/"
 import { IGatsbyState, IGatsbyPage } from "../redux/types"
-import { writeModule } from "../utils/gatsby-webpack-virtual-modules"
+import {
+  writeModule,
+  getAbsolutePathForVirtualModule,
+} from "../utils/gatsby-webpack-virtual-modules"
 
 interface IGatsbyPageComponent {
   component: string
@@ -212,7 +215,7 @@ const preferDefault = m => m && m.default || m
     .map((c: IGatsbyPageComponent): string => {
       // we need a relative import path to keep contenthash the same if directory changes
       const relativeComponentPath = path.relative(
-        path.join(program.directory, `node_modules`, `$virtual`),
+        getAbsolutePathForVirtualModule(`$virtual`),
         c.component
       )
 

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

@@ -1,5 +1,5 @@
 import VirtualModulesPlugin from "webpack-virtual-modules"
-
+import * as path from "path"
 /*
  * This module allows creating virtual (in memory only) modules / files
  * that webpack compilation can access without the need to write module
@@ -22,6 +22,8 @@ interface IGatsbyWebpackVirtualModulesContext {
 const fileContentLookup: Record<string, string> = {}
 const instances: IGatsbyWebpackVirtualModulesContext[] = []
 
+export const VIRTUAL_MODULES_BASE_PATH = `_this_is_virtual_fs_path_`
+
 export class GatsbyWebpackVirtualModules {
   apply(compiler): void {
     const virtualModules = new VirtualModulesPlugin(fileContentLookup)
@@ -32,10 +34,12 @@ export class GatsbyWebpackVirtualModules {
   }
 }
 
+export function getAbsolutePathForVirtualModule(filePath: string): string {
+  return path.join(process.cwd(), VIRTUAL_MODULES_BASE_PATH, filePath)
+}
+
 export function writeModule(filePath: string, fileContents: string): void {
-  // "node_modules" added in front of filePath allow to allow importing
-  // those modules using same path
-  const adjustedFilePath = `node_modules/${filePath}`
+  const adjustedFilePath = getAbsolutePathForVirtualModule(filePath)
 
   if (fileContentLookup[adjustedFilePath] === fileContents) {
     // we already have this, no need to cause invalidation

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

@@ -13,7 +13,10 @@ import { getBrowsersList } from "./browserslist"
 
 import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
 import { GatsbyWebpackEslintGraphqlSchemaReload } from "./gatsby-webpack-eslint-graphql-schema-reload-plugin"
-import { GatsbyWebpackVirtualModules } from "./gatsby-webpack-virtual-modules"
+import {
+  GatsbyWebpackVirtualModules,
+  VIRTUAL_MODULES_BASE_PATH,
+} from "./gatsby-webpack-virtual-modules"
 
 import { builtinPlugins } from "./webpack-plugins"
 import { IProgram, Stage } from "../commands/types"
@@ -431,21 +434,21 @@ export const createWebpackUtils = (
       return {
         test: /\.(js|mjs)$/,
         exclude: (modulePath: string): boolean => {
-          if (vendorRegex.test(modulePath)) {
-            // If dep uses Gatsby, exclude
-            if (
-              modulesThatUseGatsby.some(module =>
-                modulePath.includes(module.path)
-              )
-            ) {
-              return true
-            }
-
-            return doNotPolyfillRegex.test(modulePath)
+          // If dep is user land code, exclude
+          if (!vendorRegex.test(modulePath)) {
+            return true
           }
 
-          // If dep is user land code, exclude
-          return true
+          // If dep uses Gatsby, exclude
+          if (
+            modulesThatUseGatsby.some(module =>
+              modulePath.includes(module.path)
+            )
+          ) {
+            return true
+          }
+
+          return doNotPolyfillRegex.test(modulePath)
         },
         type: `javascript/auto`,
         use: [loaders.dependencies(jsOptions)],
@@ -458,7 +461,9 @@ export const createWebpackUtils = (
     return {
       enforce: `pre`,
       test: /\.jsx?$/,
-      exclude: vendorRegex,
+      exclude: (modulePath: string): boolean =>
+        modulePath.includes(VIRTUAL_MODULES_BASE_PATH) ||
+        vendorRegex.test(modulePath),
       use: [loaders.eslint(schema)],
     }
   }

packages/gatsby/src/utils/webpack.config.js

@@ -16,6 +16,7 @@ import { getGatsbyDependents } from "./gatsby-dependents"
 const apiRunnerNode = require(`./api-runner-node`)
 import { createWebpackUtils } from "./webpack-utils"
 import { hasLocalEslint } from "./local-eslint-config-finder"
+import { getAbsolutePathForVirtualModule } from "./gatsby-webpack-virtual-modules"
 
 const FRAMEWORK_BUNDLES = [`react`, `react-dom`, `scheduler`, `prop-types`]
 
@@ -409,6 +410,7 @@ module.exports = async (
         "socket.io-client": path.dirname(
           require.resolve(`socket.io-client/package.json`)
         ),
+        $virtual: getAbsolutePathForVirtualModule(`$virtual`),
       },
       plugins: [
         // Those two folders are special and contain gatsby-generated files