fix: UNIFY-1774 error if component config is not sourced for webpack/vite (#21563)

* fix: UNIFY-1774, throw error if we do not detect a webpackConfig for the user

* remove dead code, rely on auto-sourcing webpack config

* fix error styles, exit the devServer process when config is missing, guard against empty remoteState

* Add missing webpack for todos project

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

Co-authored-by: Lachlan Miller <[email protected]>
Co-authored-by: Zachary Williams <[email protected]>

Author: 3 people

npm/vite-dev-server/src/devServer.ts

@@ -10,6 +10,7 @@ export type ViteDevServerConfig = {
   specs: Cypress.Spec[]
   cypressConfig: Cypress.PluginConfigOptions
   devServerEvents: NodeJS.EventEmitter
+  onConfigNotFound?: (devServer: 'vite', cwd: string, lookedIn: string[]) => void
 } & {
   framework?: typeof ALL_FRAMEWORKS[number] // Add frameworks here as we implement
   viteConfig?: unknown // Derived from the user's webpack

npm/vite-dev-server/src/resolveConfig.ts

@@ -17,7 +17,7 @@ import type { Vite } from './getVite'
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
 
 export const createViteDevServerConfig = async (config: ViteDevServerConfig, vite: Vite) => {
-  const { specs, cypressConfig, viteConfig: viteOverrides = {} } = config
+  const { specs, cypressConfig, viteConfig: viteOverrides } = config
   const root = cypressConfig.projectRoot
   const { default: findUp } = await importModule('find-up')
   const configFile = await findUp(configFiles, { cwd: root } as { cwd: string })
@@ -28,11 +28,16 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
   if (configFile) {
     debug('resolved config file at', configFile, 'using root', root)
   } else if (viteOverrides) {
-    debug('Couldn\'t find a Vite config file, however we received a custom viteConfig', viteOverrides)
+    debug(`Couldn't find a Vite config file, however we received a custom viteConfig`, viteOverrides)
   } else {
-    debug(`
-    Didn\'t resolve a Vite config AND the user didn\'t pass in a custom viteConfig.
-    Falling back to Vite\'s defaults.`)
+    if (config.onConfigNotFound) {
+      config.onConfigNotFound('vite', root, configFiles)
+      // The config process will be killed from the parent, but we want to early exit so we don't get
+      // any additional errors related to not having a config
+      process.exit(0)
+    } else {
+      throw new Error(`Your component devServer config for vite is missing a required viteConfig property, since we could not automatically detect one.\n Please add one to your ${config.cypressConfig.configFile}`)
+    }
   }
 
   // Vite caches its output in the .vite directory in the node_modules where vite lives.

npm/webpack-dev-server/package.json

@@ -18,9 +18,11 @@
     "test-unit": "mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js"
   },
   "dependencies": {
+    "find-up": "6.3.0",
     "fs-extra": "9.1.0",
     "html-webpack-plugin-4": "npm:html-webpack-plugin@^4",
     "html-webpack-plugin-5": "npm:html-webpack-plugin@^5",
+    "local-pkg": "0.4.1",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
     "webpack-dev-server": "^4.7.4",

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

@@ -0,0 +1,6 @@
+export const configFiles = [
+  'webpack.config.ts',
+  'webpack.config.js',
+  'webpack.config.mjs',
+  'webpack.config.cjs',
+]

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

@@ -28,7 +28,7 @@ export interface CreateFinalWebpackConfig {
   frameworkConfig?: unknown
 }
 
-export function createWebpackDevServer (
+export async function createWebpackDevServer (
   config: CreateFinalWebpackConfig,
 ) {
   const {
@@ -42,7 +42,7 @@ export function createWebpackDevServer (
     },
   } = config
 
-  const finalWebpackConfig = makeWebpackConfig(config)
+  const finalWebpackConfig = await makeWebpackConfig(config)
   const webpackCompiler = webpack(finalWebpackConfig)
 
   if (webpackDevServerMajorVersion === 4) {

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

@@ -19,6 +19,7 @@ export type WebpackDevServerConfig = {
   specs: Cypress.Spec[]
   cypressConfig: Cypress.PluginConfigOptions
   devServerEvents: NodeJS.EventEmitter
+  onConfigNotFound?: (devServer: 'webpack', cwd: string, lookedIn: string[]) => void
 } & {
   framework?: typeof ALL_FRAMEWORKS[number] // Add frameworks here as we implement
   webpackConfig?: unknown // Derived from the user's webpack
@@ -131,7 +132,7 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Pres
 devServer.create = async function (devServerConfig: WebpackDevServerConfig) {
   const { frameworkConfig, sourceWebpackModulesResult } = await getPreset(devServerConfig)
 
-  const { server, compiler } = createWebpackDevServer({
+  const { server, compiler } = await createWebpackDevServer({
     devServerConfig,
     frameworkConfig,
     sourceWebpackModulesResult,

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

@@ -1,10 +1,12 @@
 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 { makeDefaultWebpackConfig } from './makeDefaultWebpackConfig'
 import { CypressCTWebpackPlugin } from './CypressCTWebpackPlugin'
 import type { CreateFinalWebpackConfig } from './createWebpackDevServer'
+import { configFiles } from './constants'
 
 const debug = debugFn('cypress:webpack-dev-server:makeWebpackConfig')
 
@@ -74,16 +76,12 @@ function modifyWebpackConfigForCypress (webpackConfig: Partial<Configuration>) {
  * Creates a webpack 4/5 compatible webpack "configuration"
  * to pass to the sourced webpack function
  */
-export function makeWebpackConfig (
+export async function makeWebpackConfig (
   config: CreateFinalWebpackConfig,
 ) {
   const { module: webpack } = config.sourceWebpackModulesResult.webpack
-  const userWebpackConfig = config.devServerConfig.webpackConfig as Partial<Configuration>
+  let userWebpackConfig = config.devServerConfig.webpackConfig as Partial<Configuration>
   const frameworkWebpackConfig = config.frameworkConfig as Partial<Configuration>
-  const userAndFrameworkWebpackConfig = modifyWebpackConfigForCypress(
-    merge(frameworkWebpackConfig ?? {}, userWebpackConfig ?? {}),
-  )
-
   const {
     cypressConfig: {
       projectRoot,
@@ -94,6 +92,42 @@ export function makeWebpackConfig (
     devServerEvents,
   } = config.devServerConfig
 
+  let configFile: string | undefined = undefined
+
+  if (!userWebpackConfig && !frameworkWebpackConfig) {
+    debug('Not user or framework webpack config received. Trying to automatically source it')
+
+    const { default: findUp } = await importModule('find-up')
+
+    configFile = await findUp(configFiles, { cwd: projectRoot } as { cwd: string })
+
+    if (configFile) {
+      debug('found webpack config %s', configFile)
+      const sourcedConfig = await importModule(configFile)
+
+      debug('config contains %o', sourcedConfig)
+      if (sourcedConfig && typeof sourcedConfig === 'object') {
+        userWebpackConfig = sourcedConfig.default ?? sourcedConfig
+      }
+    }
+
+    if (!userWebpackConfig) {
+      debug('could not find webpack.config!')
+      if (config.devServerConfig?.onConfigNotFound) {
+        config.devServerConfig.onConfigNotFound('webpack', projectRoot, configFiles)
+        // The config process will be killed from the parent, but we want to early exit so we don't get
+        // any additional errors related to not having a config
+        process.exit(0)
+      } else {
+        throw new Error(`Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`)
+      }
+    }
+  }
+
+  const userAndFrameworkWebpackConfig = modifyWebpackConfigForCypress(
+    merge(frameworkWebpackConfig ?? {}, userWebpackConfig ?? {}),
+  )
+
   debug(`User passed in user and framework webpack config with values %o`, userAndFrameworkWebpackConfig)
   debug(`New webpack entries %o`, files)
   debug(`Project root`, projectRoot)

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

@@ -28,6 +28,7 @@ describe('devServer', function () {
     const result = await devServer.create({
       specs: [],
       cypressConfig,
+      webpackConfig: {},
       devServerEvents: new EventEmitter(),
     })
 
@@ -49,6 +50,7 @@ describe('devServer', function () {
     const result = await devServer.create({
       specs: [],
       cypressConfig,
+      webpackConfig: {},
       devServerEvents: new EventEmitter(),
     })
 
@@ -70,6 +72,7 @@ describe('devServer', function () {
     const result = await devServer.create({
       specs: [],
       cypressConfig,
+      webpackConfig: {},
       devServerEvents: new EventEmitter(),
     })
 

packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts

@@ -137,7 +137,6 @@ component: {
   devServer: {
     framework: 'react',
     bundler: 'webpack',
-    webpackConfig: require('./webpack.config')
   }
 },
 e2e: {
@@ -267,7 +266,6 @@ component: {
   devServer: {
     framework: 'react',
     bundler: 'webpack',
-    webpackConfig: require('./webpack.config')
   }
 },
 e2e: {
@@ -377,7 +375,6 @@ component: {
   devServer: {
     framework: 'react',
     bundler: 'webpack',
-    webpackConfig: require('./webpack.config')
   }
 },
 e2e: {

packages/data-context/src/data/ProjectConfigIpc.ts

@@ -199,6 +199,7 @@ export class ProjectConfigIpc extends EventEmitter {
       })
 
       this.once('setupTestingType:error', (err) => {
+        this.onError(err)
         reject(err)
       })
 

packages/errors/__snapshot-html__/DEV_SERVER_CONFIG_FILE_NOT_FOUND.html

@@ -1530,6 +1530,23 @@ export const AllCypressErrors = {
       https://on.cypress.io/migration-guide
     `
   },
+
+  DEV_SERVER_CONFIG_FILE_NOT_FOUND: (devServer: 'vite' | 'webpack', root: string, searchedFor: string[]) => {
+    const devServerConfigFile = `${devServer}Config`
+
+    return errTemplate`\
+      You are using ${fmt.highlight(devServer)} for your dev server, but a configuration file was not found. We traversed upwards from:
+      
+      ${fmt.highlightSecondary(root)}
+      
+      looking for a file named:
+
+      ${fmt.listItems(searchedFor, { prefix: ' - ' })}
+
+      Add your ${fmt.highlight(devServer)} config at one of the above paths, or import your configuration file and provide it to 
+      the devServer config as a ${fmt.highlight(devServerConfigFile)} option.
+    `
+  },
 } as const
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/errors/src/errors.ts

@@ -1162,5 +1162,10 @@ describe('visual error templates', () => {
         default: [],
       }
     },
+    DEV_SERVER_CONFIG_FILE_NOT_FOUND: () => {
+      return {
+        default: ['vite', '/dev/project', ['vite.config.js', 'vite.config.ts']],
+      }
+    },
   })
 })

packages/errors/test/unit/visualSnapshotErrors_spec.ts

@@ -46,7 +46,7 @@ export const defaultConfig: FullConfig = {
     include: [
       'index.html',
       '**/*.{vue,html,tsx}',
-      path.resolve(__dirname, '../frontend-shared/**/*.{vue,html,tsx,svg}'),
+      path.resolve(__dirname, '../frontend-shared/**/*.{vue,html,tsx,svg,ts}'),
       path.resolve(__dirname, '../app/**/*.{vue,html,tsx,svg}'),
       path.resolve(__dirname, '../launchpad/**/*.{vue,html,tsx,svg}'),
     ],

packages/frontend-shared/windi.config.ts

@@ -556,6 +556,7 @@ enum ErrorTypeEnum {
   DASHBOARD_UNKNOWN_INVALID_REQUEST
   DEFAULT_SUPPORT_FILE_NOT_FOUND
   DEPRECATED_BEFORE_BROWSER_LAUNCH_ARGS
+  DEV_SERVER_CONFIG_FILE_NOT_FOUND
   DUPLICATE_TASK_KEY
   ERROR_READING_FILE
   ERROR_WRITING_FILE