fix: remove webpack entrypoints from for ct webpack projects (#23299)

Author: ZachJW34

npm/webpack-dev-server/src/helpers/createReactAppHandler.ts

@@ -77,8 +77,6 @@ function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Configurat
       webpackConfig = webpackConfig('development')
     }
 
-    delete webpackConfig.entry
-
     return webpackConfig
   } catch (err) {
     throw new Error(`Failed to require webpack config at ${webpackConfigPath} with error: ${err}`)

npm/webpack-dev-server/src/helpers/nextHandler.ts

@@ -72,8 +72,6 @@ async function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Prom
     },
   )
 
-  delete webpackConfig.entry
-
   return webpackConfig
 }
 

npm/webpack-dev-server/src/helpers/nuxtHandler.ts

@@ -19,7 +19,6 @@ export async function nuxtHandler (devServerConfig: WebpackDevServerConfig): Pro
     // Nuxt has asset size warnings configured by default which will cause webpack overlays to appear
     // in the browser which we don't want.
     delete webpackConfig.performance
-    delete webpackConfig.entry
 
     debug('webpack config %o', webpackConfig)
 

npm/webpack-dev-server/src/helpers/vueCliHandler.ts

@@ -17,8 +17,6 @@ export function vueCliHandler (devServerConfig: WebpackDevServerConfig): PresetH
 
     debug('webpack config %o', webpackConfig)
 
-    delete webpackConfig.entry
-
     return { frameworkConfig: webpackConfig, sourceWebpackModulesResult }
   } catch (e) {
     console.error(e) // eslint-disable-line no-console

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

@@ -2,7 +2,7 @@ import { debug as debugFn } from 'debug'
 import * as path from 'path'
 import { merge } from 'webpack-merge'
 import { importModule } from 'local-pkg'
-import type { Configuration } from 'webpack'
+import type { Configuration, EntryObject } from 'webpack'
 import { makeDefaultWebpackConfig } from './makeDefaultWebpackConfig'
 import { CypressCTWebpackPlugin } from './CypressCTWebpackPlugin'
 import type { CreateFinalWebpackConfig } from './createWebpackDevServer'
@@ -41,7 +41,7 @@ if (process.platform === 'linux') {
 const OsSeparatorRE = RegExp(`\\${path.sep}`, 'g')
 const posixSeparator = '/'
 
-const CYPRESS_WEBPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js')
+export const CYPRESS_WEBPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js')
 
 /**
  * Removes and/or modifies certain plugins known to conflict
@@ -72,29 +72,6 @@ function modifyWebpackConfigForCypress (webpackConfig: Partial<Configuration>) {
   return webpackConfig
 }
 
-async function addEntryPoint (webpackConfig: Configuration) {
-  let entry = webpackConfig.entry
-
-  if (typeof entry === 'function') {
-    entry = await entry()
-  }
-
-  if (typeof entry === 'string') {
-    entry = [entry, CYPRESS_WEBPACK_ENTRYPOINT]
-  } else if (Array.isArray(entry)) {
-    entry.push(CYPRESS_WEBPACK_ENTRYPOINT)
-  } else if (typeof entry === 'object') {
-    entry = {
-      ...entry,
-      ['cypress-entry']: CYPRESS_WEBPACK_ENTRYPOINT,
-    }
-  } else {
-    entry = CYPRESS_WEBPACK_ENTRYPOINT
-  }
-
-  webpackConfig.entry = entry
-}
-
 /**
  * Creates a webpack 4/5 compatible webpack "configuration"
  * to pass to the sourced webpack function
@@ -113,6 +90,7 @@ export async function makeWebpackConfig (
     },
     specs: files,
     devServerEvents,
+    framework,
   } = config.devServerConfig
 
   let configFile: string | undefined = undefined
@@ -184,7 +162,15 @@ export async function makeWebpackConfig (
     dynamicWebpackConfig,
   )
 
-  await addEntryPoint(mergedConfig)
+  // Angular loads global styles and polyfills via script injection in the index.html
+  if (framework === 'angular') {
+    mergedConfig.entry = {
+      ...(mergedConfig.entry as EntryObject) || {},
+      'cypress-entry': CYPRESS_WEBPACK_ENTRYPOINT,
+    }
+  } else {
+    mergedConfig.entry = CYPRESS_WEBPACK_ENTRYPOINT
+  }
 
   debug('Merged webpack config %o', mergedConfig)
 

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

@@ -3,7 +3,7 @@ import EventEmitter from 'events'
 import snapshot from 'snap-shot-it'
 import { WebpackDevServerConfig } from '../src/devServer'
 import { sourceDefaultWebpackDependencies } from '../src/helpers/sourceRelativeWebpackModules'
-import { makeWebpackConfig } from '../src/makeWebpackConfig'
+import { CYPRESS_WEBPACK_ENTRYPOINT, makeWebpackConfig } from '../src/makeWebpackConfig'
 import { createModuleMatrixResult } from './test-helpers/createModuleMatrixResult'
 
 describe('makeWebpackConfig', () => {
@@ -86,4 +86,54 @@ describe('makeWebpackConfig', () => {
     expect(actual.output.publicPath).to.eq('/test-public-path/')
     snapshot(actual)
   })
+
+  it('removes entrypoint from merged webpackConfig', async () => {
+    const devServerConfig: WebpackDevServerConfig = {
+      specs: [],
+      cypressConfig: {
+        projectRoot: '.',
+        devServerPublicPathRoute: '/test-public-path',
+      } as Cypress.PluginConfigOptions,
+      webpackConfig: {
+        entry: { main: 'src/index.js' },
+      },
+      devServerEvents: new EventEmitter(),
+    }
+    const actual = await makeWebpackConfig({
+      devServerConfig,
+      sourceWebpackModulesResult: createModuleMatrixResult({
+        webpack: 4,
+        webpackDevServer: 4,
+      }),
+    })
+
+    expect(actual.entry).eq(CYPRESS_WEBPACK_ENTRYPOINT)
+  })
+
+  it('preserves entrypoint from merged webpackConfig if framework = angular', async () => {
+    const devServerConfig: WebpackDevServerConfig = {
+      specs: [],
+      cypressConfig: {
+        projectRoot: '.',
+        devServerPublicPathRoute: '/test-public-path',
+      } as Cypress.PluginConfigOptions,
+      webpackConfig: {
+        entry: { main: 'src/index.js' },
+      },
+      devServerEvents: new EventEmitter(),
+      framework: 'angular',
+    }
+    const actual = await makeWebpackConfig({
+      devServerConfig,
+      sourceWebpackModulesResult: createModuleMatrixResult({
+        webpack: 4,
+        webpackDevServer: 4,
+      }),
+    })
+
+    expect(actual.entry).deep.eq({
+      main: 'src/index.js',
+      'cypress-entry': CYPRESS_WEBPACK_ENTRYPOINT,
+    })
+  })
 })