fix: ensure root el mounting exists, remove userland html webpack plu…

…gin (#15870)

* fix: ensure root el exists

* fix: remove userland webpack plugins

* chore: bump html webpack plugin version

* fix: remove preload plugin

* chore: remove dep

* fix: revert code

* chore: revert

* chore: revert

* fix: null check for user webpack

npm/webpack-dev-server/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "debug": "4.3.2",
+    "html-webpack-plugin": "^4.0.0",
     "lazy-compile-webpack-plugin": "0.1.11",
     "semver": "^7.3.4",
     "webpack-merge": "^5.4.0"
@@ -25,7 +26,6 @@
     "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 {
   /**
@@ -68,6 +69,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,

yarn.lock

@@ -19133,7 +19133,7 @@ html-webpack-plugin@4.0.0-beta.5:
     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==