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.

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

config sass.prepend data is string now, not callback
css: { loaderOptions: { sass: { prependData

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