Merge branch 'develop' into npm/lazy-loader-plugin

npm/react/examples/react-scripts/package.json

@@ -17,6 +17,7 @@
     "react-dom": "17.0.1",
     "react-scripts": "4.0.2"
   },
+  "homepage": "/fake-to-avoid-regression-https://github.com/cypress-io/cypress/issues/15811",
   "browserslist": {
     "production": [
       ">0.2%",

npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js

@@ -0,0 +1,17 @@
+exports['makeWebpackConfig ignores userland webpack `output.publicPath` 1'] = {
+  "output": {
+    "publicPath": "/test-public-path/",
+    "filename": "[name].js"
+  },
+  "mode": "development",
+  "optimization": {
+    "splitChunks": {
+      "chunks": "all"
+    }
+  },
+  "plugins": [
+    "HtmlWebpackPlugin",
+    "CypressCTOptionsPlugin",
+    "LazyCompilePlugin"
+  ]
+}

npm/webpack-dev-server/package.json

@@ -12,20 +12,21 @@
   "dependencies": {
     "@cypress/lazy-compile-webpack-plugin": "0.0.0-development",
     "debug": "4.3.2",
+    "html-webpack-plugin": "^4.0.0",
     "semver": "^7.3.4",
     "webpack-merge": "^5.4.0"
   },
   "devDependencies": {
     "@types/webpack-dev-server": "^3.11.1",
     "chai": "^4.2.0",
     "mocha": "^8.1.3",
+    "snap-shot-it": "7.9.3",
     "speed-measure-webpack-plugin": "1.4.2",
     "typescript": "^4.2.3",
     "webpack": "^4.44.2",
     "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
-    "html-webpack-plugin": "^4.0.0",
     "webpack": ">=4",
     "webpack-dev-server": "^3.0.0"
   },

npm/webpack-dev-server/src/makeWebpackConfig.ts

@@ -8,6 +8,7 @@ import CypressCTOptionsPlugin, { CypressCTOptionsPluginOptions } from './plugin'
 
 const debug = debugFn('cypress:webpack-dev-server:makeWebpackConfig')
 const WEBPACK_MAJOR_VERSION = Number(webpack.version.split('.')[0])
+const removeList = ['HtmlWebpackPlugin', 'PreloadPlugin']
 
 export interface UserWebpackDevServerOptions {
   /**
@@ -22,10 +23,6 @@ interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptions, UserWe
   isOpenMode: boolean
 }
 
-const mergePublicPath = (baseValue = '/', userValue = '/') => {
-  return path.join(baseValue, userValue, '/')
-}
-
 function getLazyCompilationWebpackConfig (options: MakeWebpackConfigOptions): webpack.Configuration {
   if (options.disableLazyCompilation || !options.isOpenMode) {
     return {}
@@ -52,7 +49,7 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio
 
   const entry = path.resolve(__dirname, './browser.js')
 
-  const publicPath = mergePublicPath(devServerPublicPathRoute, userWebpackConfig?.output?.publicPath)
+  const publicPath = path.join(devServerPublicPathRoute, '/')
 
   const dynamicWebpackConfig = {
     output: {
@@ -68,6 +65,25 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio
     ],
   }
 
+  // certain plugins conflict with HtmlWebpackPlugin and cause
+  // problems for some setups.
+  // most of these are application optimizations that are not relevant in a
+  // testing environment.
+  // remove those plugins to ensure a smooth configuration experience.
+  // https://github.com/cypress-io/cypress/issues/15865
+  if (userWebpackConfig?.plugins) {
+    userWebpackConfig.plugins = userWebpackConfig.plugins.filter((plugin) => {
+      if (removeList.includes(plugin.constructor.name)) {
+        /* eslint-disable no-console */
+        console.warn(`[@cypress/webpack-dev-server]: removing ${plugin.constructor.name} from configuration.`)
+
+        return false
+      }
+
+      return true
+    })
+  }
+
   const mergedConfig = merge<webpack.Configuration>(
     userWebpackConfig,
     defaultWebpackConfig,

npm/webpack-dev-server/test/unit/makeWebpackConfig.spec.ts

@@ -0,0 +1,31 @@
+import { expect } from 'chai'
+import snapshot from 'snap-shot-it'
+import { makeWebpackConfig } from '../../src/makeWebpackConfig'
+
+describe('makeWebpackConfig', () => {
+  it('ignores userland webpack `output.publicPath`', async () => {
+    const actual = await makeWebpackConfig({
+      output: {
+        publicPath: '/this-will-be-ignored',
+      },
+    }, {
+      devServerPublicPathRoute: '/test-public-path',
+      isOpenMode: true,
+      supportFile: '/support.js',
+      projectRoot: '.',
+      files: [],
+    })
+
+    // plugins contain circular deps which cannot be serialized in a snapshot.
+    // instead just compare the name and order of the plugins.
+    // @ts-expect-error
+    actual.plugins = actual.plugins.map((p) => p.constructor.name)
+
+    // these will include paths from the user's local file system, so we should not include them the snapshot
+    delete actual.output.path
+    delete actual.entry
+
+    expect(actual.output.publicPath).to.eq('/test-public-path/')
+    snapshot(actual)
+  })
+})

packages/server-ct/src/project-ct.ts

@@ -2,12 +2,11 @@ import Debug from 'debug'
 import config from '@packages/server/lib/config'
 import plugins from '@packages/server/lib/plugins'
 import devServer from '@packages/server/lib/plugins/dev-server'
-import { ProjectBase } from '@packages/server/lib/project-base'
+import { Cfg, ProjectBase } from '@packages/server/lib/project-base'
 import settings from '@packages/server/lib/util/settings'
 import specsUtil from '@packages/server/lib/util/specs'
 import { ServerCt } from './server-ct'
 import { SpecsStore } from './specs-store'
-import { options } from '@packages/server/lib/config_options'
 
 export * from '@packages/server/lib/project-base'
 
@@ -24,22 +23,12 @@ export class ProjectCt extends ProjectBase<ServerCt> {
    * 2. otherwise, use 500/500 by default.
    */
   addComponentTestingUniqueDefaults (cfg: Record<string, unknown>) {
-    const defaultViewport = options.reduce<Record<string, number>>((acc, curr) => {
-      if (curr.name === 'viewportHeight') {
-        return { ...acc, viewportHeight: curr.defaultValue as number }
-      }
-
-      if (curr.name === 'viewportWidth') {
-        return { ...acc, viewportWidth: curr.defaultValue as number }
-      }
-
-      return acc
-    }, {})
+    const rawJson = cfg.rawJson as Cfg
 
     return {
       ...cfg,
-      viewportHeight: cfg.viewportHeight !== defaultViewport.viewportHeight ? cfg.viewportHeight : 500,
-      viewportWidth: cfg.viewportWidth !== defaultViewport.viewportWidth ? cfg.viewportWidth : 500,
+      viewportHeight: rawJson.viewportHeight ?? 500,
+      viewportWidth: rawJson.viewportWidth ?? 500,
     }
   }
 

packages/server/lib/config.js

@@ -241,6 +241,8 @@ module.exports = {
   mergeDefaults (config = {}, options = {}) {
     const resolved = {}
 
+    config.rawJson = _.cloneDeep(config)
+
     _.extend(config, _.pick(options, 'configFile', 'morgan', 'isTextTerminal', 'socketId', 'report', 'browsers'))
     debug('merged config with options, got %o', config)
 

yarn.lock

@@ -19133,7 +19133,7 @@ [email protected]:
     tapable "^1.1.0"
     util.promisify "1.0.0"
 
-html-webpack-plugin@^4.5.0:
+html-webpack-plugin@^4.0.0, html-webpack-plugin@^4.5.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz#76fc83fa1a0f12dd5f7da0404a54e2699666bc12"
   integrity sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==