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

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

Author: msebas

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({})