diff --git a/frontend/package.json b/frontend/package.json
index d5695fa..edeaf8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,6 +2,7 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/frontend/src/components/SetlistDetail.vue b/frontend/src/components/SetlistDetail.vue
index 522bf48..d433bd4 100644
--- a/frontend/src/components/SetlistDetail.vue
+++ b/frontend/src/components/SetlistDetail.vue
@@ -3,26 +3,26 @@
         <div v-if="!loading">
             <div class="setlist-info m-3 is-flex is-align-content-flex-start">
                 <h1 class="title is-flex-grow-1 mr-3" v-if="!editing">{{ setlist?.name }}</h1>
-                <div class="field is-horizontal is-flex-grow-1 mr-3" v-if="editing">
+                <div class="field is-horizontal is-flex-grow-1 mr-3" v-if="editing && draftValues">
                     <div class="field-label is-normal">
                         <label class="label">Name</label>
                     </div>
                     <div class="field-body">
                         <div class="field" v-bind:class="{ static: !editing }" >
                             <div class="control">
-                                <input v-model="draftValues?.name" class="input" type="text" placeholder="Easter Morning Service" />
+                                <input v-model="draftValues.name" class="input" type="text" placeholder="Easter Morning Service" />
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="field is-horizontal is-flex-grow-1 mr-3" v-if="editing">
+                <div class="field is-horizontal is-flex-grow-1 mr-3" v-if="editing && draftValues">
                     <div class="field-label is-normal">
                         <label class="label">Date</label>
                     </div>
                     <div class="field-body">
                         <div class="field" v-bind:class="{ static: !editing }" >
                             <div class="control">
-                                <input v-model="draftValues?.date" class="input" type="date" />
+                                <input v-model="draftValues.date" class="input" type="date" />
                             </div>
                         </div>
                     </div>
@@ -68,7 +68,7 @@
                     </p>
                 </div>
             </div>
-            <div class="subtitle m-3" v-if="!editing">{{ setlist?.date }}</div>
+            <div class="subtitle m-3" v-if="!editing && setlist">{{ setlist.date }}</div>
         </div>
     </div>
 </template>
diff --git a/frontend/src/components/Song.vue b/frontend/src/components/Song.vue
index 62c0f30..b285c79 100644
--- a/frontend/src/components/Song.vue
+++ b/frontend/src/components/Song.vue
@@ -25,7 +25,7 @@
                             <div class="field-body">
                                 <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input v-if="editing" v-model="draftValues?.title" class="input"
+                                        <input v-if="editing && draftValues" v-model="draftValues.title" class="input"
                                             :class="{ 'is-danger': v$.title.$error }" type="text"
                                             placeholder="The name of the song or hymn" @blur="v$.title.$touch" />
                                         <span v-else>
@@ -42,7 +42,7 @@
                             <div class="field-body">
                                 <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input v-if="editing" v-model="draftValues?.composer" class="input" type="text"
+                                        <input v-if="editing && draftValues" v-model="draftValues.composer" class="input" type="text"
                                             placeholder="Artist / composer / writer" />
                                         <span v-else>
                                             {{ song?.composer }}
@@ -59,8 +59,7 @@
                                 <div class="field-flex-col">
                                     <div class="field" v-bind:class="{ static: !editing }">
                                         <div class="control">
-                                            <input v-if="editing" v-model="draftValues?.songbook?.title
-                                                " class="input" type="text"
+                                            <input v-if="editing && draftValues" v-model="draftValues.songbook.title" class="input" type="text"
                                                 placeholder="Songbook, hymnal or collection title" />
                                             <span v-else>
                                                 {{ song?.songbook?.title }}
@@ -78,7 +77,7 @@
                                                 static: !editing,
                                             }">
                                                 <div class="control">
-                                                    <input v-if="editing" v-model="draftValues?.songbookNumber
+                                                    <input v-if="editing && draftValues" v-model="draftValues.songbookNumber
                                                         " class="input" type="text"
                                                         placeholder="Song number in the book" />
                                                     <span v-else>
@@ -93,14 +92,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-if="editing" class="field is-horizontal">
+                        <div v-if="editing && draftValues" class="field is-horizontal">
                             <div class="field-label is-normal">
                                 <label class="label">Youtube video</label>
                             </div>
                             <div class="field-body">
                                 <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input v-model="draftValues?.recordingUrl" class="input" type="url"
+                                        <input v-model="draftValues.recordingUrl" class="input" type="url"
                                             placeholder="https://www.youtube.com/watch?v=..." />
                                     </div>
                                 </div>
@@ -189,8 +188,8 @@
                     <div v-if="editing" class="field is-horizontal">
                         <div class="field-body">
                             <div class="field" v-bind:class="{ static: !editing }">
-                                <div class="control" v-if="editing">
-                                    <input v-model="draftValues?.recordingUrl" class="input" type="url"
+                                <div class="control" v-if="editing && draftValues">
+                                    <input v-model="draftValues.recordingUrl" class="input" type="url"
                                         placeholder="https://www.youtube.com/watch?v=..." />
                                 </div>
                             </div>
@@ -314,12 +313,11 @@ onMounted(() => {
         const songId = Number(route.params.id);
         const songLoaded = songStore.get(songId)
             .then((value) => {
-                if (!value.songbook) {
-                    value.songbook = {};
+                if (value) {
+                    song.value = value;
+                    const content = value.text;
+                    editor.value!.commands.setContent(content)
                 }
-                song.value = value;
-                const content = value.text;
-                editor.value!.commands.setContent(content)
             });
         scoreStore.fetchForSong(songId).then((value) => scores.value = value);
         const songCategoriesLoaded = categoryStore.getForSong(songId);
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index b719b3a..ca28aa2 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -14,14 +14,14 @@
                     <div class="field">
                         <label class="label">Name</label>
                         <div class="control">
-                            <input class="input" type="text" v-model="draftValues?.displayName" />
+                            <input class="input" type="text" v-if="draftValues" v-model="draftValues.displayName" />
                         </div>
                     </div>
 
                     <div class="field">
                         <label class="label">Email</label>
                         <div class="control has-icons-left">
-                            <input class="input" type="email" placeholder="you@" v-model="draftValues?.email" />
+                            <input class="input" type="email" placeholder="you@" v-if="draftValues" v-model="draftValues.email" />
                             <span class="icon is-small is-left">
                                 <i class="fas fa-envelope"></i>
                             </span>
@@ -70,9 +70,11 @@ onMounted(() => {
 const save = () => {
     saving.value = true;
     user.value = draftValues.value;
-    userStore.save(draftValues.value)
-        .finally(() => saving.value = false);
+    if (draftValues.value)
+        userStore.save(draftValues.value)
+            .finally(() => saving.value = false);
 }
+
 </script>
 <style>
 .w-40 {
diff --git a/frontend/src/views/Setlist.vue b/frontend/src/views/Setlist.vue
index cff4e5d..8b53a56 100644
--- a/frontend/src/views/Setlist.vue
+++ b/frontend/src/views/Setlist.vue
@@ -9,7 +9,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SetlistDetail from '@/components/SetlistDetail.vue';
 import Songs from '@/components/Songs.vue';
 
diff --git a/frontend/vite.config.js b/frontend/vite.config.ts
similarity index 100%
rename from frontend/vite.config.js
rename to frontend/vite.config.ts