From 2863e338920362cbb1ecf20c2fab28fbd3a52c33 Mon Sep 17 00:00:00 2001
From: Jessica Sachs <jess@jessicasachs.io>
Date: Thu, 18 Feb 2021 18:00:48 -0500
Subject: [PATCH] fix: add webpack-dev-server to peerDependencies, improve
 peerDependency error handling, fix index-template.html path (#15149)

---
 npm/webpack-dev-server/index.js      |  4 ++
 npm/webpack-dev-server/package.json  |  3 +-
 npm/webpack-dev-server/src/errors.ts | 80 ++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 npm/webpack-dev-server/src/errors.ts

diff --git a/npm/webpack-dev-server/index.js b/npm/webpack-dev-server/index.js
index 2d2f3c0bcb..59ad7a88e9 100644
--- a/npm/webpack-dev-server/index.js
+++ b/npm/webpack-dev-server/index.js
@@ -1 +1,5 @@
+const { validatePeerDependencies } = require('./dist/errors')
+
+validatePeerDependencies()
+
 module.exports = require('./dist')
diff --git a/npm/webpack-dev-server/package.json b/npm/webpack-dev-server/package.json
index b83e4591cc..1149e61a58 100644
--- a/npm/webpack-dev-server/package.json
+++ b/npm/webpack-dev-server/package.json
@@ -25,7 +25,8 @@
   },
   "peerDependencies": {
     "html-webpack-plugin": "> 3",
-    "webpack": "> 4"
+    "webpack": "> 4",
+    "webpack-dev-server": "> 3"
   },
   "files": [
     "dist"
diff --git a/npm/webpack-dev-server/src/errors.ts b/npm/webpack-dev-server/src/errors.ts
new file mode 100644
index 0000000000..ea1cef561c
--- /dev/null
+++ b/npm/webpack-dev-server/src/errors.ts
@@ -0,0 +1,80 @@
+export interface MissingDependency {
+  prettyName: string
+  packageName: string
+}
+
+const peerDeps: MissingDependency[] = [
+  {
+    prettyName: 'Webpack Dev Server',
+    packageName: 'webpack-dev-server',
+  },
+  {
+    prettyName: 'Html Webpack Plugin',
+    packageName: 'html-webpack-plugin',
+  },
+  {
+    prettyName: 'Webpack',
+    packageName: 'webpack',
+  },
+]
+
+const makePrettyLibs = (libs) => {
+  return libs.reduce((acc, curr, idx) => {
+    acc.prettyNames.push(curr.prettyName)
+    acc.packageNames.push(curr.packageName)
+
+    if (idx >= libs.length) return acc
+
+    return {
+      prettyNames: acc.prettyNames.join(', '),
+      packageNames: acc.packageNames.join(' '),
+    }
+  }, { prettyNames: [], packageNames: [] })
+}
+
+export class MissingPeerDependency extends Error {
+  private libs: { prettyNames: string[], packageNames: string[] }
+
+  constructor (message,
+    libs: MissingDependency[]) {
+    const prettyLibs = makePrettyLibs(libs)
+
+    super(`${message} ${prettyLibs.prettyNames}`)
+    this.name = 'PeerDependencyMissing'
+    this.libs = prettyLibs
+
+    Object.setPrototypeOf(this, MissingPeerDependency.prototype)
+  }
+
+  get prettyMessage () {
+    return `❌ Missing ${this.libs.prettyNames}. Please install them with npm or yarn.
+
+    npm i ${this.libs.packageNames} -D
+    yarn add ${this.libs.packageNames} --dev
+
+    Updating webpack config is unnecessary
+`
+  }
+}
+
+export function validatePeerDependencies () {
+  const missingPeerDeps = peerDeps.filter((peerDep) => {
+    try {
+      require(peerDep.packageName)
+    } catch (err) {
+      return true
+    }
+
+    return false
+  })
+
+  if (missingPeerDeps.length) {
+    const error = new MissingPeerDependency(`@cypress/webpack-dev-server is missing peer dependencies`, missingPeerDeps)
+
+    console.error(error.prettyMessage) // eslint-disable-line
+
+    throw error
+  }
+
+  return true
+}