From 7f82eebfb0230e8b175eb6e87033cd75e60dcdc5 Mon Sep 17 00:00:00 2001 From: Jessica Sachs Date: Thu, 14 Apr 2022 16:32:33 -0400 Subject: [PATCH 1/2] fix: webpack integration tests for app w webpack-dev-server-fresh --- .../helpers/sourceRelativeWebpackModules.ts | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts b/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts index ba5ec3d70309..ebf3153e51b7 100644 --- a/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts +++ b/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts @@ -1,6 +1,9 @@ import Module from 'module' import path from 'path' import type { WebpackDevServerConfig } from '../devServer' +import debugFn from 'debug' + +const debug = debugFn('cypress:webpack:sourceRelativeWebpackModules') type ModuleClass = typeof Module & { _load(id: string, parent: Module, isMain: boolean): any @@ -68,13 +71,20 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { // First, we source the framework, ensuring it's sourced from the user's project and not the // Cypress binary. This is the path we use to relative-resolve the + // This is generally used for Create React App and Vue CLI and other packages + // that ship webpack as a dependency. e.g. your-project/node_modules/react-scripts/node_modules/webpack + // SO what we do, is we grab the framework's path, and try and find webpack relative to that framework. if (config.framework) { try { const frameworkJsonPath = require.resolve(`${config.framework}/package.json`, { paths: [searchRoot], }) + + debug('Framework JSON path is %s', frameworkJsonPath) const frameworkPathRoot = path.dirname(frameworkJsonPath) + debug('Framework JSON path root is %s', frameworkPathRoot) + // Want to make sure we're sourcing this from the user's code. Otherwise we can // warn and tell them they don't have their dependencies installed if (!frameworkPathRoot.includes(config.cypressConfig.cypressBinaryRoot)) { @@ -86,14 +96,18 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { searchRoot = frameworkPathRoot } } catch (e) { + debug('Error %o', e) // TODO } } // Webpack: - + // At this point, we know where we're looking for webpack! + // We've made accommodations for certain frameworks that bundle it in (e.g. react-scripts) let webpackJsonPath: string + debug('search root is %s', searchRoot) + try { webpackJsonPath = require.resolve('webpack/package.json', { paths: [searchRoot], @@ -110,19 +124,27 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { }), ], }) + + debug('using webpack-batteries-included %s', webpackJsonPath) } result.webpack.importPath = path.dirname(webpackJsonPath) result.webpack.packageJson = require(webpackJsonPath) result.webpack.module = require(result.webpack.importPath) - result.webpack.majorVersion = getMajorVersion(result.webpack.packageJson, [4, 5]); + result.webpack.majorVersion = getMajorVersion(result.webpack.packageJson, [4, 5]) - (Module as ModuleClass)._load = function (request, parent, isMain) { + const pathsVal = [path.dirname(result.webpack.importPath)] + + debug('Resolving pathsVal %s', pathsVal) + + ;(Module as ModuleClass)._load = function (request, parent, isMain) { if (request === 'webpack' || request.startsWith('webpack/')) { const resolvePath = require.resolve(request, { - paths: [searchRoot], + paths: pathsVal, }) + debug('Resolve path %s', resolvePath) + return originalModuleLoad(resolvePath, parent, isMain) } @@ -132,7 +154,7 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { (Module as ModuleClass)._resolveFilename = function (request, parent, isMain, options) { if (request === 'webpack' || request.startsWith('webpack/') && !options?.paths) { return originalModuleResolveFilename(request, parent, isMain, { - paths: [searchRoot], + paths: pathsVal, }) } From a841ad05a21a7e8b4579a249d3ed6c45c9563e9b Mon Sep 17 00:00:00 2001 From: Zachary Williams Date: Thu, 14 Apr 2022 15:40:39 -0500 Subject: [PATCH 2/2] fix: use webpack import path --- .../src/helpers/sourceRelativeWebpackModules.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts b/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts index ebf3153e51b7..17ee430ce6bf 100644 --- a/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts +++ b/npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts @@ -3,7 +3,7 @@ import path from 'path' import type { WebpackDevServerConfig } from '../devServer' import debugFn from 'debug' -const debug = debugFn('cypress:webpack:sourceRelativeWebpackModules') +const debug = debugFn('cypress:webpack-dev-server-fresh:sourceRelativeWebpackModules') type ModuleClass = typeof Module & { _load(id: string, parent: Module, isMain: boolean): any @@ -73,7 +73,7 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { // Cypress binary. This is the path we use to relative-resolve the // This is generally used for Create React App and Vue CLI and other packages // that ship webpack as a dependency. e.g. your-project/node_modules/react-scripts/node_modules/webpack - // SO what we do, is we grab the framework's path, and try and find webpack relative to that framework. + // So what we do, is we grab the framework's path, and try and find webpack relative to that framework. if (config.framework) { try { const frameworkJsonPath = require.resolve(`${config.framework}/package.json`, { @@ -133,14 +133,12 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { result.webpack.module = require(result.webpack.importPath) result.webpack.majorVersion = getMajorVersion(result.webpack.packageJson, [4, 5]) - const pathsVal = [path.dirname(result.webpack.importPath)] - - debug('Resolving pathsVal %s', pathsVal) + const webpackImportPath = result.webpack.importPath ;(Module as ModuleClass)._load = function (request, parent, isMain) { if (request === 'webpack' || request.startsWith('webpack/')) { const resolvePath = require.resolve(request, { - paths: pathsVal, + paths: [webpackImportPath], }) debug('Resolve path %s', resolvePath) @@ -154,7 +152,7 @@ export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) { (Module as ModuleClass)._resolveFilename = function (request, parent, isMain, options) { if (request === 'webpack' || request.startsWith('webpack/') && !options?.paths) { return originalModuleResolveFilename(request, parent, isMain, { - paths: pathsVal, + paths: [webpackImportPath], }) }