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.

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

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

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