Use the Vue 3 template compiler in the Vue 3 CI jobs

Miguel Rinconrequested to merge
634491-vue3-template-compiler-in-ci into master

What does this MR do and why?

The Vue 3 CI jobs (jest vue3, compile-production-assets vue3 and the other jobs that extend .vue3) now compile templates with the Vue 3 compiler, not the Vue 2 one.

GitLab can only remove Vue 2 when the whole app builds with the Vue 3 template compiler. Until now, no CI job tested that. With this MR, a change that breaks with the Vue 3 compiler fails in CI, in the MR that causes it.

The Vue 2 removal proof of concept (!263207) found every failure that the Vue 3 compiler causes. Separate MRs fixed them, so this MR contains only the switch.

MRs that fixed the Vue 3 compiler failures
  • !263243 (merged): router-link and gl-emoji resolution warnings.
  • !263248 (merged): the legacy labels dropdown listener.
  • !263255 (merged): specs that depend on whitespace between elements. The Vue 3 compiler drops that whitespace.
  • !263256 (merged): the pipeline header reads pipeline.id while pipeline is null.
  • !263855 (merged): @gitlab/ui 138.7.0 stops GlNavItem and GlLink from resolving router-link when they do not use it.
  • !263806 (merged): the CE branch rule registers the policy components it uses.
  • !263821 (merged): three specs, including the shared SFC spec.
What the MR changes

1. Turn on the Vue 3 compiler in the Vue 3 CI jobs

  • .vue3 sets VUE_COMPILER_VERSION: 3.
  • .gitlab/ci/version.yml sets VUE_COMPILER_VERSION: "2" for every other job.
  • The two asset cache keys include the compiler version, so builds with different compilers never share a cache.
  • scripts/frontend/jest_ci.js logs VUE_COMPILER_VERSION with the other variables.

jest-snapshot-vue3 sets VUE_VERSION: 3 but does not extend .vue3. It is a report job that compares snapshots, so it keeps the Vue 2 compiler.

2. Make rspack build with the Vue 3 compiler

With the Vue 3 compiler, rspack failed at startup with Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'.

  • vue-loader 17 (vue-loader-vue3, for the Vue 3 compiler) sees a webpack 5 compatible bundler under rspack, so it uses its webpack 5 plugin.
  • That plugin loads webpack 5 internals. rspack does not have them, and the installed webpack is version 4.

config/rspack/vue_loader_plugin.js is GitLab's rspack copy of the plugin, and it needs no webpack internals. It supported only vue-loader 15. Now it supports both versions, and rspack always uses it. The versions differ in two ways:

  • the loader file paths: lib/loaders/ in vue-loader 15, dist/ in vue-loader 17.
  • the template rule: vue-loader 17 always needs it. vue-loader 15 needs it only with the Vue 2.7 compiler, which GitLab uses.

For Vue 2 builds, the plugin produces the same rules as before. webpack, Vite and Jest do not use this file.

3. Read the Vue version in one place

config/rspack/vue.js, vite.config.js, jest.config.base.js and jest.config.integration.js each read VUE_VERSION and VUE_COMPILER_VERSION themselves, with slightly different defaults. They now use config/vue3migration/version.js, as webpack already did.

The MR also removes the Using Vue.js 2 (compiler 2) log line from the webpack, rspack and Vite configs. Nothing reads it.

Screenshots or screen recordings

Not applicable. No UI change.

How to set up and validate locally

  1. On master, run VUE_VERSION=3 VUE_COMPILER_VERSION=3 NODE_ENV=production yarn rspack-prod. It fails with Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'.
  2. On this branch, run the same command. It compiles.
  3. On this branch, run NODE_ENV=production yarn rspack-prod without the variables. It compiles, as on master.

In CI, the vue3 jobs pass with the Vue 3 compiler, as-if-FOSS included: https://gitlab.com/gitlab-org/gitlab/-/pipelines/2972061185.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

References

Edited by Miguel Rincon

Merge request reports