fix(webpack-dev-server): remove output.publicPath from webpack-dev-se…

…rver (#15839)

* fix: remove publicPath in react-scripts if it is present

* fix: remove publicPath in react-scripts if it is present

* fix: remove publicPath in webpack-dev-server regardless

* fix: add root path

* chore: revert

* fix: remove user base path

* remove unused function

* test: add unit test for make webpack config

* chore: make purpose for fake url more clear

* do not include local filesystem path in snapshot

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

@@ -20,6 +20,7 @@
     "@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",

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

@@ -23,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 {}
@@ -53,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: {

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)
+  })
+})