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 2 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
14 changes: 8 additions & 6 deletions npm/webpack-dev-server/src/helpers/vueCliHandler.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import debugLib from 'debug'
import type { Configuration } from 'webpack'
//import type { Configuration } from 'webpack'
import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
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/lib/Service', {
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting, I have not looked at the Vue CLI code in some time. What about users on older versions of Vue CLI? Will they have a problem?

We have tests around this https://github.com/cypress-io/cypress/tree/develop/system-tests/projects/vuecli4-vue2 Vue CLI 4 and Vue 2. Amazingly they are all passing - but I don't understand how this can be the case, unless service/lib/Service has always been a thing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Well, the v3 branch of vue-cli contains the file and to me it does not seem like much of the called code has changed.

I think #23605 would allow to move the fix to vue-cli code (e.g. return a promise from their webpack.config.js), but the main aim of this pull request is to get the default configuration to work with a vue.config.js and "type": "module" and I do not know if there are other conflicts on the vue-cli side.

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

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