From 0e73ec5e5db3157b61d034f513bb5959684545b7 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Tue, 21 Jul 2020 20:42:49 +0200 Subject: [PATCH] fix(gatsby): don't place virtual modules in node_modules directory (#25720) * fix(gatsby): don't place virtual modules in node_modules directory * fix eslint rule Co-authored-by: Ward Peeters --- .../gatsby/src/bootstrap/requires-writer.ts | 7 ++-- .../utils/gatsby-webpack-virtual-modules.ts | 12 ++++--- packages/gatsby/src/utils/webpack-utils.ts | 35 +++++++++++-------- packages/gatsby/src/utils/webpack.config.js | 2 ++ 4 files changed, 35 insertions(+), 21 deletions(-) diff --git a/packages/gatsby/src/bootstrap/requires-writer.ts b/packages/gatsby/src/bootstrap/requires-writer.ts index b3c9d895e0f38..27e79c0205eac 100644 --- a/packages/gatsby/src/bootstrap/requires-writer.ts +++ b/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 ) diff --git a/packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts b/packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts index 41c6917714418..c8f51554232c6 100644 --- a/packages/gatsby/src/utils/gatsby-webpack-virtual-modules.ts +++ b/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 = {} 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 diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index f3b2123d5fc10..adaeb7503c412 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/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)], } } diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 5e55ab44823ae..41bf6cca0f784 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/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