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

In the context of the Security Review for the Wikidata Query Builder, we decided to migrate it from its current stack using @vue/cli and thus Webpack to vite and thus Rollup.

This post will outline the obstacles that we came across and how we solved them in order to help with future migrations.

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

Import of type shadowing built-in object
https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/705377

https://github.com/underfin/vite-plugin-vue2/issues/108#issuecomment-894767827

Typescript must be compiled to the correct node version for jest to be able to run the tests
E.g. Node.js v12 doesn't know about  operator.

See https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping

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.