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

Co-authored-by: Zachary Williams <[email protected]>
cypress-io · Sep 26, 2022 · 6a40936 · 6a40936 · cypress-bot · Sep 26, 2022
1 parent 88ecb1e
commit 6a40936
Show file tree

Hide file tree

Showing 8 changed files with 4,239 additions and 9 deletions.
diff --git a/npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts b/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[] = []

diff --git a/npm/webpack-dev-server/src/devServer.ts b/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)

diff --git a/npm/webpack-dev-server/src/helpers/vueCliHandler.ts b/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)}`)
   }
 }
diff --git a/npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts b/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)

diff --git a/system-tests/projects/vuecli5-vue3-type-module/package.json b/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"
+}
diff --git a/system-tests/projects/vuecli5-vue3-type-module/tsconfig.json b/system-tests/projects/vuecli5-vue3-type-module/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "es6"
+  }
+}
diff --git a/system-tests/projects/vuecli5-vue3-type-module/vue.config.js b/system-tests/projects/vuecli5-vue3-type-module/vue.config.js
@@ -0,0 +1,3 @@
+import { defineConfig } from '@vue/cli-service'
+
+export default defineConfig({})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { defineConfig } from '@vue/cli-service'

		export default defineConfig({})