Yarn upgrade: Vite 5, Axios 1, etc

package.json

@@ -15,6 +15,7 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "type": "module",
   "dependencies": {
     "@formkit/vue": "^1.0.0-beta.14",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -24,9 +25,9 @@
     "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@vitejs/plugin-vue": "^5",
     "@vue/tsconfig": "^0.5.1",
-    "@vueuse/core": "^9.6.0",
+    "@vueuse/core": "^10.7.2",
     "autoprefixer": "^10.4.7",
-    "axios": "^0.21.4",
+    "axios": "^1",
     "eslint": "^8.15.0",
     "filesize": "^10.0.6",
     "js-yaml": "^4.1.0",
@@ -35,24 +36,23 @@
     "rollup-plugin-visualizer": "^5.6.0",
     "tailwindcss": "^3.1.4",
     "typescript": "^5.3.3",
-    "vite": "^4.0.5",
-    "vite-plugin-rewrite-all": "1.0.1 || ^1.0.3",
+    "vite": "^5",
     "vue": "^3.4",
     "vue-i18n": "9",
     "vue-matomo": "^4.2.0",
     "vue-router": "4",
     "vue-tsc": "^1.8.27"
   },
   "devDependencies": {
-    "@testing-library/vue": "^6.6.1",
+    "@testing-library/vue": "^8.0.1",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.10.6",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^8.0",
-    "happy-dom": "^7.7.0",
-    "prettier": "^2.4.0",
-    "vitest": "^0.25.3"
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.0",
+    "happy-dom": "^13.3.8",
+    "prettier": "^3.2.4",
+    "vitest": "^1.2.2"
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

src/api/api.ts

@@ -34,7 +34,7 @@ class MinkApi {
     this.jwt = jwt;
     this.axios.defaults.headers["Authorization"] = jwt
       ? `Bearer ${jwt}`
-      : undefined;
+      : null;
   }
 
   /** @see https://ws.spraakbanken.gu.se/ws/mink/api-doc#tag/Documentation/operation/APIinfo */

src/corpus/config/CorpusConfiguration.vue

@@ -19,6 +19,7 @@ import useSources from "../sources/sources.composable";
 import type { AxiosError } from "axios";
 import type { FormKitOptionsList } from "@formkit/inputs";
 import type { ConfigSentenceSegmenter } from "@/api/sparvConfig.types";
+import type { MinkResponse } from "@/api/api.types";
 
 const router = useRouter();
 const corpusId = useCorpusIdParam();
@@ -83,7 +84,7 @@ async function submit(fields: Form) {
   } catch (e) {
     if (e instanceof TypeError) {
       alert(e.message, "error");
-    } else alertError(e as AxiosError);
+    } else alertError(e as AxiosError<MinkResponse>);
   }
 }
 </script>

src/corpus/createCorpus.composable.ts

@@ -11,6 +11,7 @@ import {
   type ConfigOptions,
 } from "@/api/corpusConfig";
 import type { AxiosError } from "axios";
+import type { MinkResponse } from "@/api/api.types";
 
 export default function useCreateCorpus() {
   const corpusStore = useCorpusStore();
@@ -104,7 +105,7 @@ export default function useCreateCorpus() {
       // If creating the config fails, there's a TypeError.
       if (e instanceof TypeError) alert(e.message, "error");
       // Otherwise it's probably a backend error when saving.
-      else alertError(e as AxiosError);
+      else alertError(e as AxiosError<MinkResponse>);
       // Discard the empty corpus.
       await deleteCorpus(corpusId).catch(alertError);
     }

src/message/messenger.composable.ts

@@ -2,7 +2,8 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import remove from "lodash/remove";
 import { randomString } from "@/util";
-import type { AxiosError } from "axios";
+import { AxiosError } from "axios";
+import type { MinkResponse } from "@/api/api.types";
 
 export type Alert = {
   key: string;
@@ -45,7 +46,7 @@ export default function useMessenger() {
   }
 
   /** Display a backend error message. */
-  const alertError = (err: AxiosError): undefined => {
+  const alertError = (err: AxiosError<MinkResponse>): undefined => {
     if (err.response?.data) {
       const data = err.response.data;
 
@@ -54,7 +55,7 @@ export default function useMessenger() {
         const translationKey = `api.code.${data.return_code}`;
         if (translationExists(translationKey)) {
           // Pass the response data, plus request params, as variables to be replaced for "{placeholders}" in the translation message.
-          const messageVariables = { ...err.config.params, ...data };
+          const messageVariables = { ...err.config?.params, ...data };
           alert(t(translationKey, messageVariables), "error");
           return;
         }

vite.config.ts

@@ -1,28 +1,26 @@
 import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
-import pluginRewriteAll from "vite-plugin-rewrite-all";
 import ViteYaml from "@modyfi/vite-plugin-yaml";
-import visualizer from "rollup-plugin-visualizer";
+import { visualizer } from "rollup-plugin-visualizer";
 import { ServerOptions } from "https";
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   // Load .env files. Vite will do it itself, but only later. See https://github.com/vitejs/vite/issues/1930
   Object.assign(process.env, loadEnv(mode, process.cwd(), ""));
 
   // Read HTTPS cert and key, if their paths are specified in env.
   const DEV_HTTPS: ServerOptions = {};
   if (process.env.DEV_HTTPS_KEY && process.env.DEV_HTTPS_CERT) {
-    const fs = require("fs");
+    const fs = await import("fs");
     DEV_HTTPS.key = fs.readFileSync(process.env.DEV_HTTPS_KEY);
     DEV_HTTPS.cert = fs.readFileSync(process.env.DEV_HTTPS_CERT);
   }
 
   return {
     plugins: [
       vue(),
-      pluginRewriteAll(),
       ViteYaml(),
       visualizer(), // Keep visualizer last.
     ],