User:Michael Große (WMDE)/drafts/Migrating Query Builder from @vue/cli to vite

The Wikidata Query Builder is a static Vue 2 app developed by Wikimedia Deutschland between Fall 2020 and Spring 2021. It was developed as a standard @vue/cli app, however that led to complications during the Security Review that is needed for code to be deployed to production. The reason is that @vue/cli with its huge number of deeply nested dependencies (including Webpack) and slow update cycles led to a stagging number of vulnerabilities in the dev dependencies, as reported by.

To resolve this issue, and after encouragement by the Security Team, we decided to migrate this build-stack from @vue/cli (and Webpack) to vite (and Rollup).

Unfortunately, this migration didn't go smoothly. Nonetheless, we managed it (shout out to Bereket Teshome for doing the main work here). To help other teams migrating away from @vue/cli, this post will outline the obstacles that we came across and how we solved them.

Main patch: https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/705353

Import of type shadowing built-in object
We used to have a type, that would in some cases shadow the native Javascript   built-in. While that worked without a problem with @vue/cli and Webpack, it failed with vite and Rollup with the error message.

We solved it by renaming our type to something more descriptive and thus no longer shadowing the built-in: https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/705377

Alternatively, we apparently also could have specified explicitly that we are only importing a type: https://github.com/underfin/vite-plugin-vue2/issues/108#issuecomment-894767827

Jest encountered an unexpected token -> Typescript must be compiled to the correct node version for jest to be able to run the tests
Running unit tests with Jest on CI failed with the error message `Jest encountered an unexpected token` and pointing to the null coalescing and similar operators. The solution was to make use of the correct "Node Target Mapping" in TypeScript.

vite plugin is needed to make environment variables available
Error:

Solution: vite-plugin-env-compatible

config sass.prepend data is string now, not callback
Symptom: no CSS in dev or production build

The solution was to go from

in  to

in.

prevent duplicate imports of global style files
Problem: The code defined in  is prepended to every SFC css. This can lead to warnings while building the app or even to the styles being imported multiple times.

Solution: import styles that contain actual rules (as opposed to just variables/tokens) in the  section of App.vue. See https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/708762

Reference Error: require is not defined
Caused by the sparql.js package

Having this in the vite.config.js fixes the error: build: { commonjsOptions: { ignoreDynamicRequires: true, },   },

Typescript is not checked in the build process
Run typescript checker before building (and maybe explicitly as a test)

use vue-tsc

Difference in dev and production build
dev build and production build are not identical. Browser tests should use production build, e.g. via

Still open issues

 * T287659: Make Query Builder CSS not contain multiple "ress" comments
 * using  to also check vue templates? Latest when we migrate to vue3.