Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: allow asynchronous vue cli init phase #23936

Merged
merged 5 commits into from
Sep 26, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts
Original file line number Diff line number Diff line change
@@ -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[] = []
Expand Down
2 changes: 1 addition & 1 deletion npm/webpack-dev-server/src/devServer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
12 changes: 7 additions & 5 deletions npm/webpack-dev-server/src/helpers/vueCliHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@msebas realized that the main file of @vue/cli-service is the Service file so we don't need a deep import to resolve it. Also, I pushed up a test!

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)}`)
}
}
4 changes: 2 additions & 2 deletions npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down
10 changes: 10 additions & 0 deletions system-tests/projects/vuecli5-vue3-type-module/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"dependencies": {
"vue": "^3.2.13"
},
"devDependencies": {
"@vue/cli-service": "~5.0.0"
},
"type": "module",
"projectFixtureDirectory": "vue-cli"
}
5 changes: 5 additions & 0 deletions system-tests/projects/vuecli5-vue3-type-module/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"compilerOptions": {
"module": "es6"
}
}
3 changes: 3 additions & 0 deletions system-tests/projects/vuecli5-vue3-type-module/vue.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { defineConfig } from '@vue/cli-service'

export default defineConfig({})