fix: allow asynchronous vue cli init phase (#23936)

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts

@@ -1,7 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const PROJECTS: ProjectFixtureDir[] = ['vuecli4-vue2', 'vuecli4-vue3', 'vuecli5-vue3']
+const PROJECTS: ProjectFixtureDir[] = ['vuecli4-vue2', 'vuecli4-vue3', 'vuecli5-vue3', 'vuecli5-vue3-type-module']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

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

@@ -122,7 +122,7 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
       return await nuxtHandler(devServerConfig)
 
     case 'vue-cli':
-      return vueCliHandler(devServerConfig)
+      return await vueCliHandler(devServerConfig)
 
     case 'next':
       return await nextHandler(devServerConfig)

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

@@ -5,21 +5,23 @@ import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules
 
 const debug = debugLib('cypress:webpack-dev-server:vueCliHandler')
 
-export function vueCliHandler (devServerConfig: WebpackDevServerConfig): PresetHandlerResult {
+export async function vueCliHandler (devServerConfig: WebpackDevServerConfig): Promise<PresetHandlerResult> {
   const sourceWebpackModulesResult = sourceDefaultWebpackDependencies(devServerConfig)
 
   try {
-    const config = require.resolve('@vue/cli-service/webpack.config', {
+    const Service = require(require.resolve('@vue/cli-service', {
       paths: [devServerConfig.cypressConfig.projectRoot],
-    })
+    }))
+    let service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
 
-    const webpackConfig = require(config) as Configuration
+    await service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
+    const webpackConfig = service.resolveWebpackConfig() as Configuration
 
     debug('webpack config %o', webpackConfig)
 
     return { frameworkConfig: webpackConfig, sourceWebpackModulesResult }
   } catch (e) {
     console.error(e) // eslint-disable-line no-console
-    throw Error(`Error loading @vue/cli-service/webpack.config.js. Looked in ${require.resolve.paths(devServerConfig.cypressConfig.projectRoot)}`)
+    throw Error(`Error loading @vue/cli-service/lib/Service or resolving WebpackConfig. Looked in ${require.resolve.paths(devServerConfig.cypressConfig.projectRoot)}`)
   }
 }

npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts

@@ -13,7 +13,7 @@ describe('vueCliHandler', function () {
 
     process.chdir(projectRoot)
 
-    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = vueCliHandler({
+    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await vueCliHandler({
       cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
       framework: 'vue-cli',
     } as WebpackDevServerConfig)
@@ -30,7 +30,7 @@ describe('vueCliHandler', function () {
 
     process.chdir(projectRoot)
 
-    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = vueCliHandler({
+    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await vueCliHandler({
       cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
       framework: 'vue-cli',
     } as WebpackDevServerConfig)

system-tests/projects/vuecli5-vue3-type-module/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "~5.0.0"
+  },
+  "type": "module",
+  "projectFixtureDirectory": "vue-cli"
+}

system-tests/projects/vuecli5-vue3-type-module/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "es6"
+  }
+}

system-tests/projects/vuecli5-vue3-type-module/vue.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from '@vue/cli-service'
+
+export default defineConfig({})