diff --git a/client/src/App.vue b/client/src/App.vue
index c598807e..0db09cc5 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -21,52 +21,52 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
-import ScrollUp from '@/components/ScrollUp';
-import ReadOnlyBanner from '@/components/ReadOnlyBanner';
+import ScrollUp from '@/components/ScrollUp.vue';
+import ReadOnlyBanner from '@/components/ReadOnlyBanner.vue';
 
 import modals from '@/components/modals';
 
 const NewContentBlockWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/NewContentBlockWizard')
+  import('@/components/content-block-form/NewContentBlockWizard.vue')
 );
 const EditContentBlockWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/EditContentBlockWizard')
+  import('@/components/content-block-form/EditContentBlockWizard.vue')
 );
 const EditRoomEntryWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/rooms/room-entries/EditRoomEntryWizard')
+  import('@/components/rooms/room-entries/EditRoomEntryWizard.vue')
 );
 const NewProjectEntryWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/NewProjectEntryWizard')
+  import('@/components/portfolio/NewProjectEntryWizard.vue')
 );
 const EditProjectEntryWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/EditProjectEntryWizard')
+  import('@/components/portfolio/EditProjectEntryWizard.vue')
 );
 const NewObjectiveWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/objective-groups/NewObjectiveWizard')
+  import('@/components/objective-groups/NewObjectiveWizard.vue')
 );
 const NewNoteWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/notes/NewNoteWizard')
+  import('@/components/notes/NewNoteWizard.vue')
 );
 const EditNoteWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/notes/EditNoteWizard')
+  import('@/components/notes/EditNoteWizard.vue')
 );
 const EditClassNameWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/school-class/EditClassNameWizard')
+  import('@/components/school-class/EditClassNameWizard.vue')
 );
 const EditTeamNameWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/profile/EditTeamNameWizard')
+  import('@/components/profile/EditTeamNameWizard.vue')
 );
 const EditSnapshotTitleWizard = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/snapshots/EditSnapshotTitleWizard')
+  import('@/components/snapshots/EditSnapshotTitleWizard.vue')
 );
-const DefaultLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/DefaultLayout'));
-const SimpleLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/SimpleLayout'));
+const DefaultLayout = defineAsyncComponent(() => import('@/layouts/DefaultLayout.vue'));
+const SimpleLayout = defineAsyncComponent(() => import('@/layouts/SimpleLayout.vue'));
 const FullScreenLayout = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "layouts" */ '@/layouts/FullScreenLayout')
+  import('@/layouts/FullScreenLayout.vue')
 );
-const PublicLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/PublicLayout'));
-const BlankLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/BlankLayout'));
-const SplitLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/SplitLayout'));
+const PublicLayout = defineAsyncComponent(() => import('@/layouts/PublicLayout.vue'));
+const BlankLayout = defineAsyncComponent(() => import('@/layouts/BlankLayout.vue'));
+const SplitLayout = defineAsyncComponent(() => import('@/layouts/SplitLayout.vue'));
 
 export default {
   name: 'App',
diff --git a/client/src/components/AddContentButton.vue b/client/src/components/AddContentButton.vue
index 1266ab9a..60f9b3cd 100644
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@@ -13,7 +13,7 @@
 import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
 import { defineAsyncComponent } from 'vue';
 
-const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer'));
+const AddPointer = defineAsyncComponent(() => import('@/components/icons/AddPointer.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue
index eb224474..4656e81f 100644
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@@ -9,7 +9,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon'));
+const AddIcon = defineAsyncComponent(() => import('@/components/icons/AddIcon.vue'));
 
 export default {
   props: ['index'],
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 76c0cfaf..6aa62772 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import StudentSubmission from '@/components/StudentSubmission';
+import StudentSubmission from '@/components/StudentSubmission.vue';
 
 import { meQuery } from '@/graphql/queries';
 
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index 2b471507..c89876a1 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -15,7 +15,7 @@ import { PROJECTS_PAGE } from '@/router/portfolio.names';
 import { defineAsyncComponent } from 'vue';
 
 const ChevronLeft = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronLeft')
+  import('@/components/icons/ChevronLeft.vue')
 );
 
 export default {
diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue
index 91047a9e..aff762f1 100644
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@@ -23,7 +23,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick'));
+const Tick = defineAsyncComponent(() => import('@/components/icons/Tick.vue'));
 
 export default {
   props: ['selectedColor'],
diff --git a/client/src/components/FullscreenImage.vue b/client/src/components/FullscreenImage.vue
index 9e6c87b7..1b27ee19 100644
--- a/client/src/components/FullscreenImage.vue
+++ b/client/src/components/FullscreenImage.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 
 export default {
   components: {
diff --git a/client/src/components/FullscreenInfographic.vue b/client/src/components/FullscreenInfographic.vue
index 26c4037c..e01bf18d 100644
--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 import { defineAsyncComponent } from 'vue';
 const InfogramBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock')
+  import('@/components/content-blocks/InfogramBlock.vue')
 );
 const GeniallyBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock')
+  import('@/components/content-blocks/GeniallyBlock.vue')
 );
 
 export default {
diff --git a/client/src/components/FullscreenVideo.vue b/client/src/components/FullscreenVideo.vue
index eb73a415..4a338940 100644
--- a/client/src/components/FullscreenVideo.vue
+++ b/client/src/components/FullscreenVideo.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 
 export default {
   components: {
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index ae46b377..1078dfb0 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -28,13 +28,13 @@
 <script>
 import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
 import UserWidget from '@/components/UserWidget.vue';
-import CurrentClass from '@/components/school-class/CurrentClass';
+import CurrentClass from '@/components/school-class/CurrentClass.vue';
 
 import openSidebar from '@/mixins/open-sidebar';
 import me from '@/mixins/me';
 import { defineAsyncComponent } from 'vue';
 
-const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger'));
+const Hamburger = defineAsyncComponent(() => import('@/components/icons/Hamburger.vue'));
 
 export default {
   mixins: [openSidebar, me],
diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index 643ca355..e916ae52 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -11,7 +11,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon'));
+const InfoIcon = defineAsyncComponent(() => import('@/components/icons/InfoIcon.vue'));
 
 export default {
   props: ['text'],
diff --git a/client/src/components/LoadingButton.vue b/client/src/components/LoadingButton.vue
index 4be94aa9..582ba101 100644
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@@ -16,7 +16,7 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const LoadingIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon')
+  import('@/components/icons/LoadingIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index c6d09079..33768b33 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import UserWidget from '@/components/UserWidget';
+import UserWidget from '@/components/UserWidget.vue';
 
 import me from '@/mixins/me';
 import openSidebar from '@/mixins/open-sidebar';
 import { defineAsyncComponent } from 'vue';
 
-const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));
-const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger'));
+const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
+const Hamburger = defineAsyncComponent(() => import('@/components/icons/Hamburger.vue'));
 
 export default {
   mixins: [me, openSidebar],
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 25b68338..755b3f13 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -36,7 +36,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon'));
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index eabb9e7a..87679f27 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
 import { defineAsyncComponent } from 'vue';
 
 const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue'));
diff --git a/client/src/components/Radiobutton.vue b/client/src/components/Radiobutton.vue
index 21fef9ba..985494b4 100644
--- a/client/src/components/Radiobutton.vue
+++ b/client/src/components/Radiobutton.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import BaseInput from '@/components/ui/BaseInput';
+import BaseInput from '@/components/ui/BaseInput.vue';
 
 export default {
   props: {
diff --git a/client/src/components/ScrollUp.vue b/client/src/components/ScrollUp.vue
index fac3cced..070b4c0b 100644
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@@ -12,7 +12,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const ArrowUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowUp'));
+const ArrowUp = defineAsyncComponent(() => import('@/components/icons/ArrowUp.vue'));
 
 export default {
   components: {
diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index 80f8f685..e92615df 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
+import StudentSubmissionDocument from '@/components/StudentSubmissionDocument.vue';
 
 export default {
   props: ['submission'],
diff --git a/client/src/components/StudentSubmissionDocument.vue b/client/src/components/StudentSubmissionDocument.vue
index 966fc2ac..e60924a7 100644
--- a/client/src/components/StudentSubmissionDocument.vue
+++ b/client/src/components/StudentSubmissionDocument.vue
@@ -13,7 +13,7 @@
 import { defineAsyncComponent } from 'vue';
 import filenameFromUrl from '@/helpers/urls';
 const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  import('@/components/icons/DocumentIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/UserMetaWidget.vue b/client/src/components/UserMetaWidget.vue
index 32b5dbff..e9b8abe4 100644
--- a/client/src/components/UserMetaWidget.vue
+++ b/client/src/components/UserMetaWidget.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar.vue';
 
 export default {
   props: ['firstName', 'lastName', 'avatarUrl', 'date'],
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 9a40635f..644945cd 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar.vue';
 
 export default {
   props: {
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index f9f23d09..d4461d2d 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -95,13 +95,13 @@
 </template>
 
 <script>
-import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+import TopicNavigation from '@/components/book-navigation/TopicNavigation.vue';
 
 import sidebarMixin from '@/mixins/sidebar';
 import meMixin from '@/mixins/me';
 import { defineAsyncComponent } from 'vue';
 
-const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));
+const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 1ba4647f..37442cbc 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import ContentNavigation from '@/components/book-navigation/ContentNavigation';
+import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
 
 import sidebarMixin from '@/mixins/sidebar';
 import { defineAsyncComponent } from 'vue';
 
-const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon'));
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 
 export default {
   mixins: [sidebarMixin],
diff --git a/client/src/components/content-block-form/AddContentLink.vue b/client/src/components/content-block-form/AddContentLink.vue
index 833a092d..03c903b1 100644
--- a/client/src/components/content-block-form/AddContentLink.vue
+++ b/client/src/components/content-block-form/AddContentLink.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import PlusIcon from '@/components/icons/PlusIcon';
+import PlusIcon from '@/components/icons/PlusIcon.vue';
 export default {
   components: { PlusIcon },
 };
diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index 9b9b67b5..f1ed33eb 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -39,62 +39,62 @@
 </template>
 
 <script>
-import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
 import { defineAsyncComponent } from 'vue';
 
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 const ContentBlockElementChooserWidget = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ContentBlockElementChooserWidget')
+  import('@/components/content-forms/ContentBlockElementChooserWidget.vue')
 );
 const LinkForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/LinkForm')
+  import('@/components/content-forms/LinkForm.vue')
 );
 const VideoForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/VideoForm')
+  import('@/components/content-forms/VideoForm.vue')
 );
 const ImageForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ImageForm')
+  import('@/components/content-forms/ImageForm.vue')
 );
 const DocumentForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/DocumentForm')
+  import('@/components/content-forms/DocumentForm.vue')
 );
 const AssignmentForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/AssignmentForm')
+  import('@/components/content-forms/AssignmentForm.vue')
 );
 const TextForm = defineAsyncComponent(() =>
   import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue')
 );
 const SubtitleForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/SubtitleForm')
+  import('@/components/content-forms/SubtitleForm.vue')
 );
 // readonly blocks
 const Assignment = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/assignment/Assignment')
+  import('@/components/content-blocks/assignment/Assignment.vue')
 );
 const SurveyBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/SurveyBlock')
+  import('@/components/content-blocks/SurveyBlock.vue')
 );
 const Solution = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Solution')
+  import('@/components/content-blocks/Solution.vue')
 );
 const ImageBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ImageBlock')
+  import('@/components/content-blocks/ImageBlock.vue')
 );
 const Instruction = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Instruction')
+  import('@/components/content-blocks/Instruction.vue')
 );
 const ModuleRoomSlug = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ModuleRoomSlug')
+  import('@/components/content-blocks/ModuleRoomSlug.vue')
 );
 const CmsDocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/CmsDocumentBlock')
+  import('@/components/content-blocks/CmsDocumentBlock.vue')
 );
 const ThinglinkBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ThinglinkBlock')
+  import('@/components/content-blocks/ThinglinkBlock.vue')
 );
 const InfogramBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/InfogramBlock')
+  import('@/components/content-blocks/InfogramBlock.vue')
 );
 
 const CHOOSER = 'content-block-element-chooser-widget';
diff --git a/client/src/components/content-block-form/ContentsForm.vue b/client/src/components/content-block-form/ContentsForm.vue
index 1274ab9e..6f256712 100644
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@@ -65,17 +65,17 @@ import { defineAsyncComponent } from 'vue';
 import { meQuery } from '@/graphql/queries';
 
 const ModalInput = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/ModalInput')
+  import('@/components/ModalInput.vue')
 );
 const AddContentElement = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/AddContentElement')
+  import('@/components/AddContentElement.vue')
 );
 const ContentElement = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/ContentElement')
+  import('@/components/content-block-form/ContentElement.vue')
 );
 
-const Modal = defineAsyncComponent(() => import('@/components/Modal'));
-const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));
+const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
+const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/content-block-form/EditContentBlockWizard.vue b/client/src/components/content-block-form/EditContentBlockWizard.vue
index cc61b7ce..ea98574d 100644
--- a/client/src/components/content-block-form/EditContentBlockWizard.vue
+++ b/client/src/components/content-block-form/EditContentBlockWizard.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm.vue';
 
 import { store } from '@/store';
 
diff --git a/client/src/components/content-block-form/NewContentBlockWizard.vue b/client/src/components/content-block-form/NewContentBlockWizard.vue
index faba8790..d220e557 100644
--- a/client/src/components/content-block-form/NewContentBlockWizard.vue
+++ b/client/src/components/content-block-form/NewContentBlockWizard.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm.vue';
 
 import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
diff --git a/client/src/components/content-blocks/CmsDocumentBlock.vue b/client/src/components/content-blocks/CmsDocumentBlock.vue
index 41588a19..d19ebe5b 100644
--- a/client/src/components/content-blocks/CmsDocumentBlock.vue
+++ b/client/src/components/content-blocks/CmsDocumentBlock.vue
@@ -17,7 +17,7 @@
 import { defineAsyncComponent } from 'vue';
 
 const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  import('@/components/icons/DocumentIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index f7c1f277..51aa6ea4 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -26,64 +26,64 @@ import { constructContentComponentBookmarkMutation } from '@/helpers/update-cont
 import { defineAsyncComponent } from 'vue';
 
 const TextBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock')
+  import('@/components/content-blocks/TextBlock.vue')
 );
 const InstrumentWidget = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InstrumentWidget')
+  import('@/components/content-blocks/InstrumentWidget.vue')
 );
 const ImageBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageBlock')
+  import('@/components/content-blocks/ImageBlock.vue')
 );
 const ImageUrlBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageUrlBlock')
+  import('@/components/content-blocks/ImageUrlBlock.vue')
 );
 const VideoBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/VideoBlock')
+  import('@/components/content-blocks/VideoBlock.vue')
 );
 const LinkBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock')
+  import('@/components/content-blocks/LinkBlock.vue')
 );
 const DocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
+  import('@/components/content-blocks/DocumentBlock.vue')
 );
 const CmsDocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock')
+  import('@/components/content-blocks/CmsDocumentBlock.vue')
 );
 const InfogramBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock')
+  import('@/components/content-blocks/InfogramBlock.vue')
 );
 const ThinglinkBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ThinglinkBlock')
+  import('@/components/content-blocks/ThinglinkBlock.vue')
 );
 const GeniallyBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock')
+  import('@/components/content-blocks/GeniallyBlock.vue')
 );
 const SubtitleBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock')
+  import('@/components/content-blocks/SubtitleBlock.vue')
 );
 const SectionTitleBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SectionTitleBlock')
+  import('@/components/content-blocks/SectionTitleBlock.vue')
 );
 const ContentListBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentListBlock')
+  import('@/components/content-blocks/ContentListBlock.vue')
 );
 const ModuleRoomSlug = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ModuleRoomSlug')
+  import('@/components/content-blocks/ModuleRoomSlug.vue')
 );
 const Assignment = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/Assignment')
+  import('@/components/content-blocks/assignment/Assignment.vue')
 );
 const Survey = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SurveyBlock')
+  import('@/components/content-blocks/SurveyBlock.vue')
 );
 const Solution = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution')
+  import('@/components/content-blocks/Solution.vue')
 );
 const Instruction = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Instruction')
+  import('@/components/content-blocks/Instruction.vue')
 );
 const BookmarkActions = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/notes/BookmarkActions')
+  import('@/components/notes/BookmarkActions.vue')
 );
 
 export default {
diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue
index f7b29bdd..f3a15962 100644
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@@ -11,8 +11,8 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
-const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));
+const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList.vue'));
+const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock.vue'));
 
 export default {
   name: 'ContentBlockList',
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index 12d928b4..e2c8500a 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -20,9 +20,9 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  import('@/components/icons/DocumentIcon.vue')
 );
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/content-blocks/Instruction.vue b/client/src/components/content-blocks/Instruction.vue
index be696bbf..f29ce589 100644
--- a/client/src/components/content-blocks/Instruction.vue
+++ b/client/src/components/content-blocks/Instruction.vue
@@ -15,7 +15,7 @@
 <script>
 import me from '@/mixins/me';
 import { defineAsyncComponent } from 'vue';
-const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon'));
+const BulbIcon = defineAsyncComponent(() => import('@/components/icons/BulbIcon.vue'));
 
 export default {
   props: ['value'],
diff --git a/client/src/components/content-blocks/LinkBlock.vue b/client/src/components/content-blocks/LinkBlock.vue
index 372df211..47f733fc 100644
--- a/client/src/components/content-blocks/LinkBlock.vue
+++ b/client/src/components/content-blocks/LinkBlock.vue
@@ -15,7 +15,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon'));
+const LinkIcon = defineAsyncComponent(() => import('@/components/icons/LinkIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 6f8c0f6b..16ee9354 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -35,7 +35,7 @@
 
 <script>
 import { sanitizeAsHtml } from '@/helpers/text';
-import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
+import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock.vue';
 
 export default {
   props: ['value'],
diff --git a/client/src/components/content-blocks/VideoBlock.vue b/client/src/components/content-blocks/VideoBlock.vue
index 1bf8f6ee..ec734a52 100644
--- a/client/src/components/content-blocks/VideoBlock.vue
+++ b/client/src/components/content-blocks/VideoBlock.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-import VimeoEmbed from '@/components/videos/VimeoEmbed';
-import SrfEmbed from '@/components/videos/SrfEmbed';
+import YoutubeEmbed from '@/components/videos/YoutubeEmbed.vue';
+import VimeoEmbed from '@/components/videos/VimeoEmbed.vue';
+import SrfEmbed from '@/components/videos/SrfEmbed.vue';
 import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
 
 export default {
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 2cbcd485..63e9aa97 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -69,13 +69,13 @@ import { defineAsyncComponent } from 'vue';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 const SubmissionForm = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm.vue')
+  import('@/components/content-blocks/assignment/SubmissionForm.vue')
 );
 const Solution = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution.vue')
+  import('@/components/content-blocks/Solution.vue')
 );
 const SpellCheck = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SpellCheck.vue')
+  import('@/components/content-blocks/assignment/SpellCheck.vue')
 );
 
 export default {
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index a7b66243..d2894db3 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -26,10 +26,10 @@
 import { newLineToParagraph } from '@/helpers/text';
 import { defineAsyncComponent } from 'vue';
 const DocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
+  import('@/components/content-blocks/DocumentBlock.vue')
 );
 
-const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon'));
+const InfoIcon = defineAsyncComponent(() => import('@/components/icons/InfoIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 8b601165..1280c269 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -29,10 +29,10 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const TickCircleIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon')
+  import('@/components/icons/TickCircleIcon.vue')
 );
 const LoadingIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon')
+  import('@/components/icons/LoadingIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/content-forms/AssignmentForm.vue b/client/src/components/content-forms/AssignmentForm.vue
index 16b0dbc4..8279c107 100644
--- a/client/src/components/content-forms/AssignmentForm.vue
+++ b/client/src/components/content-forms/AssignmentForm.vue
@@ -21,7 +21,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon'));
+const InfoIcon = defineAsyncComponent(() => import('@/components/icons/InfoIcon.vue'));
 
 export default {
   props: ['value', 'index'],
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index 0a6d3fcc..08940fa9 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -39,11 +39,11 @@
 </template>
 
 <script>
-import Checkbox from '@/components/ui/Checkbox';
+import Checkbox from '@/components/ui/Checkbox.vue';
 
 import formElementIcons from '@/components/ui/form-element-icons';
-import CrossIcon from '@/components/icons/CrossIcon';
-import ChooserElement from '@/components/content-forms/ChooserElement';
+import CrossIcon from '@/components/icons/CrossIcon.vue';
+import ChooserElement from '@/components/content-forms/ChooserElement.vue';
 import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';
 
 export default {
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index dfda4788..36048a94 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -30,11 +30,11 @@
 
 <script>
 import { uploadcare } from '@/helpers/uploadcare';
-import LoadingIcon from '@/components/icons/LoadingIcon';
+import LoadingIcon from '@/components/icons/LoadingIcon.vue';
 import { defineAsyncComponent } from 'vue';
 
 const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  import('@/components/icons/DocumentIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index 702395b1..08e71d98 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -36,7 +36,7 @@
 
 <script>
 import uploadcare from 'uploadcare-widget';
-import LoadingIcon from '@/components/icons/LoadingIcon';
+import LoadingIcon from '@/components/icons/LoadingIcon.vue';
 
 export default {
   props: ['value', 'index'],
diff --git a/client/src/components/content-forms/SubtitleForm.vue b/client/src/components/content-forms/SubtitleForm.vue
index e81845d9..fd61c02a 100644
--- a/client/src/components/content-forms/SubtitleForm.vue
+++ b/client/src/components/content-forms/SubtitleForm.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import InputWithLabel from '@/components/ui/InputWithLabel';
+import InputWithLabel from '@/components/ui/InputWithLabel.vue';
 
 export default {
   props: {
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
index c540e19c..cecc2e44 100644
--- a/client/src/components/content-forms/TextFormWithHelpText.vue
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import TextForm from '@/components/content-forms/TextForm';
-import HelpfulTooltip from '@/components/HelpfulTooltip';
+import TextForm from '@/components/content-forms/TextForm.vue';
+import HelpfulTooltip from '@/components/HelpfulTooltip.vue';
 
 export default {
   props: ['title', 'value', 'helpText'],
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index 8eab5196..0a994e05 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -44,12 +44,12 @@
 </template>
 
 <script>
-import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-import VimeoEmbed from '@/components/videos/VimeoEmbed';
-import SrfEmbed from '@/components/videos/SrfEmbed';
+import YoutubeEmbed from '@/components/videos/YoutubeEmbed.vue';
+import VimeoEmbed from '@/components/videos/VimeoEmbed.vue';
+import SrfEmbed from '@/components/videos/SrfEmbed.vue';
 import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
 import { defineAsyncComponent } from 'vue';
-const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon'));
+const InfoIcon = defineAsyncComponent(() => import('@/components/icons/InfoIcon.vue'));
 
 export default {
   props: ['value', 'index'],
diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 3fa6d3c4..2df9610a 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -23,7 +23,7 @@
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import { defineAsyncComponent } from 'vue';
 const ChevronRight = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight')
+  import('@/components/icons/ChevronRight.vue')
 );
 
 export default {
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index 09773bc3..b992ddd8 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -25,7 +25,7 @@
 
 <script>
 import { defineComponent } from 'vue';
-import FilterEntry from '@/components/instruments/FilterEntry';
+import FilterEntry from '@/components/instruments/FilterEntry.vue';
 
 import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index 71c90e8f..71617880 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/client/src/components/instruments/InstrumentFilter.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import FilterGroup from '@/components/instruments/FilterGroup';
+import FilterGroup from '@/components/instruments/FilterGroup.vue';
 
 import INSTRUMENT_CATEGORIES_QUERY from 'gql/queries/instrumentCategoriesQuery.gql';
 
diff --git a/client/src/components/modals/Confirm.vue b/client/src/components/modals/Confirm.vue
index 97777e93..c4c6e9f4 100644
--- a/client/src/components/modals/Confirm.vue
+++ b/client/src/components/modals/Confirm.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 
 export default {
   components: {
diff --git a/client/src/components/modals/index.js b/client/src/components/modals/index.js
index 1c953a0d..8c0a73be 100644
--- a/client/src/components/modals/index.js
+++ b/client/src/components/modals/index.js
@@ -1,24 +1,24 @@
 import { defineAsyncComponent } from 'vue';
-const Modal = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */ '@/components/Modal'));
+const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
 const FullscreenImage = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/FullscreenImage')
+  import('@/components/FullscreenImage.vue')
 );
 const FullscreenInfographic = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/FullscreenInfographic')
+  import('@/components/FullscreenInfographic.vue')
 );
 const FullscreenVideo = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/FullscreenVideo')
+  import('@/components/FullscreenVideo.vue')
 );
 const DeactivatePerson = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/profile/DeactivatePerson')
+  import('@/components/profile/DeactivatePerson.vue')
 );
 const SnapshotCreated = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/modules/SnapshotCreated')
+  import('@/components/modules/SnapshotCreated.vue')
 );
 const ChangeVisibility = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "modals" */ '@/components/rooms/ChangeVisibility')
+  import('@/components/rooms/ChangeVisibility.vue')
 );
-const Confirm = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */ '@/components/modals/Confirm'));
+const Confirm = defineAsyncComponent(() => import('@/components/modals/Confirm.vue'));
 
 export default {
   Modal,
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 1f152462..401eb101 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -78,7 +78,7 @@
 <script>
 import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
 import Chapter from '@/components/Chapter.vue';
-import BookmarkActions from '@/components/notes/BookmarkActions';
+import BookmarkActions from '@/components/notes/BookmarkActions.vue';
 
 export default {
   props: {
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 82640b20..42aaebdd 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import BackLink from '@/components/BackLink';
+import BackLink from '@/components/BackLink.vue';
 import { moduleQuery } from '@/graphql/queries';
 
-import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
+import ToggleEditing from '@/components/toggle-menu/ToggleEditing.vue';
 import me from '@/mixins/me';
-import SnapshotMenu from '@/components/modules/SnapshotMenu';
+import SnapshotMenu from '@/components/modules/SnapshotMenu.vue';
 
 export default {
   apollo: {
diff --git a/client/src/components/modules/ModuleSubNavigation.vue b/client/src/components/modules/ModuleSubNavigation.vue
index 3133ab12..19caf89a 100644
--- a/client/src/components/modules/ModuleSubNavigation.vue
+++ b/client/src/components/modules/ModuleSubNavigation.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import BackLink from '@/components/BackLink';
+import BackLink from '@/components/BackLink.vue';
 import { moduleQuery } from '@/graphql/queries';
 
 import me from '@/mixins/me';
diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue
index e586e183..52ce2197 100644
--- a/client/src/components/modules/SnapshotCreated.vue
+++ b/client/src/components/modules/SnapshotCreated.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 import { SNAPSHOT_LIST } from '@/router/module.names';
 import dateformat from '@/helpers/date-format';
 
diff --git a/client/src/components/modules/SnapshotHeader.vue b/client/src/components/modules/SnapshotHeader.vue
index 55fe86af..ed5a0ca9 100644
--- a/client/src/components/modules/SnapshotHeader.vue
+++ b/client/src/components/modules/SnapshotHeader.vue
@@ -50,7 +50,7 @@
 
 <script>
 import dateformat from '@/helpers/date-format';
-import Checkbox from '@/components/ui/Checkbox';
+import Checkbox from '@/components/ui/Checkbox.vue';
 
 import me from '@/mixins/me';
 
diff --git a/client/src/components/modules/SnapshotListItem.vue b/client/src/components/modules/SnapshotListItem.vue
index 2a731668..c95385ad 100644
--- a/client/src/components/modules/SnapshotListItem.vue
+++ b/client/src/components/modules/SnapshotListItem.vue
@@ -52,8 +52,8 @@ import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
 import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
 import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
 import gql from 'graphql-tag';
-import PenIcon from '@/components/icons/PenIcon';
-import TrashIcon from '@/components/icons/TrashIcon';
+import PenIcon from '@/components/icons/PenIcon.vue';
+import TrashIcon from '@/components/icons/TrashIcon.vue';
 import { removeAtIndex } from '@/graphql/immutable-operations';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
 
diff --git a/client/src/components/modules/SnapshotMenu.vue b/client/src/components/modules/SnapshotMenu.vue
index b52c0e4f..852386c7 100644
--- a/client/src/components/modules/SnapshotMenu.vue
+++ b/client/src/components/modules/SnapshotMenu.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
 import { SNAPSHOT_LIST } from '@/router/module.names';
 import me from '@/mixins/me';
 
diff --git a/client/src/components/news/NewsTeasers.vue b/client/src/components/news/NewsTeasers.vue
index 2b9fa0c2..5391ef57 100644
--- a/client/src/components/news/NewsTeasers.vue
+++ b/client/src/components/news/NewsTeasers.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import NewsTeaser from '@/components/news/NewsTeaser';
+import NewsTeaser from '@/components/news/NewsTeaser.vue';
 
 import news from '@/mixins/news';
 
diff --git a/client/src/components/notes/BookmarkActions.vue b/client/src/components/notes/BookmarkActions.vue
index 74823c02..705b6f65 100644
--- a/client/src/components/notes/BookmarkActions.vue
+++ b/client/src/components/notes/BookmarkActions.vue
@@ -34,12 +34,12 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const BookmarkIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon')
+  import('@/components/icons/BookmarkIcon.vue')
 );
 const AddNoteIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon')
+  import('@/components/icons/AddNoteIcon.vue')
 );
-const NoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon'));
+const NoteIcon = defineAsyncComponent(() => import('@/components/icons/NoteIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/notes/EditNoteWizard.vue b/client/src/components/notes/EditNoteWizard.vue
index e7bb840a..86ebabbd 100644
--- a/client/src/components/notes/EditNoteWizard.vue
+++ b/client/src/components/notes/EditNoteWizard.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import NoteForm from '@/components/notes/NoteForm';
+import NoteForm from '@/components/notes/NoteForm.vue';
 
 import UPDATE_NOTE_MUTATION from '@/graphql/gql/mutations/updateNote.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
diff --git a/client/src/components/notes/NewNoteWizard.vue b/client/src/components/notes/NewNoteWizard.vue
index 08b1239b..9590d338 100644
--- a/client/src/components/notes/NewNoteWizard.vue
+++ b/client/src/components/notes/NewNoteWizard.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import NoteForm from '@/components/notes/NoteForm';
+import NoteForm from '@/components/notes/NoteForm.vue';
 
 import { mapGetters } from 'vuex';
 import { constructNoteMutation } from '@/helpers/new-note-mutation.js';
diff --git a/client/src/components/notes/NoteForm.vue b/client/src/components/notes/NoteForm.vue
index a7394cac..ea3b0d41 100644
--- a/client/src/components/notes/NoteForm.vue
+++ b/client/src/components/notes/NoteForm.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal.vue';
+import ModalInput from '@/components/ModalInput.vue';
 
 export default {
   props: ['note'],
diff --git a/client/src/components/objective-groups/NewObjectiveWizard.vue b/client/src/components/objective-groups/NewObjectiveWizard.vue
index ff19146f..e160fcc4 100644
--- a/client/src/components/objective-groups/NewObjectiveWizard.vue
+++ b/client/src/components/objective-groups/NewObjectiveWizard.vue
@@ -29,8 +29,8 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal.vue';
+import ModalInput from '@/components/ModalInput.vue';
 
 import NEW_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/addObjective.gql';
 import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/queries/objectiveGroupQuery.gql';
diff --git a/client/src/components/objective-groups/Objective.vue b/client/src/components/objective-groups/Objective.vue
index 9b987f0f..b3e53987 100644
--- a/client/src/components/objective-groups/Objective.vue
+++ b/client/src/components/objective-groups/Objective.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import VisibilityAction from '@/components/visibility/VisibilityAction';
-import UserWidget from '@/components/UserWidget';
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
+import UserWidget from '@/components/UserWidget.vue';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
 
 import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
index 084dfdf2..61a600ea 100644
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ b/client/src/components/objective-groups/ObjectiveForm.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import ModalInput from '@/components/ModalInput';
+import ModalInput from '@/components/ModalInput.vue';
 import { defineAsyncComponent } from 'vue';
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 export default {
   props: ['objective'],
diff --git a/client/src/components/objective-groups/ObjectiveGroup.vue b/client/src/components/objective-groups/ObjectiveGroup.vue
index 2265d356..67118229 100644
--- a/client/src/components/objective-groups/ObjectiveGroup.vue
+++ b/client/src/components/objective-groups/ObjectiveGroup.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import Objective from '@/components/objective-groups/Objective';
-import VisibilityAction from '@/components/visibility/VisibilityAction';
-import AddContentButton from '@/components/AddContentButton';
+import Objective from '@/components/objective-groups/Objective.vue';
+import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
+import AddContentButton from '@/components/AddContentButton.vue';
 
 import me from '@/mixins/me';
 
diff --git a/client/src/components/objective-groups/ObjectiveGroups.vue b/client/src/components/objective-groups/ObjectiveGroups.vue
index 0504cda3..7d3551af 100644
--- a/client/src/components/objective-groups/ObjectiveGroups.vue
+++ b/client/src/components/objective-groups/ObjectiveGroups.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
+import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup.vue';
 import { meQuery } from '@/graphql/queries';
 
 export default {
diff --git a/client/src/components/portfolio/AddProjectEntry.vue b/client/src/components/portfolio/AddProjectEntry.vue
index c8c25a78..3f53558c 100644
--- a/client/src/components/portfolio/AddProjectEntry.vue
+++ b/client/src/components/portfolio/AddProjectEntry.vue
@@ -10,7 +10,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon'));
+const PlusIcon = defineAsyncComponent(() => import('@/components/icons/PlusIcon.vue'));
 export default {
   props: ['project'],
   components: { PlusIcon },
diff --git a/client/src/components/portfolio/EditProject.vue b/client/src/components/portfolio/EditProject.vue
index 739d2ffb..738b1bb8 100644
--- a/client/src/components/portfolio/EditProject.vue
+++ b/client/src/components/portfolio/EditProject.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ProjectForm from '@/components/portfolio/ProjectForm';
+import ProjectForm from '@/components/portfolio/ProjectForm.vue';
 
 import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';
 
diff --git a/client/src/components/portfolio/OwnerWidget.vue b/client/src/components/portfolio/OwnerWidget.vue
index 8a7ce9ad..aea22075 100644
--- a/client/src/components/portfolio/OwnerWidget.vue
+++ b/client/src/components/portfolio/OwnerWidget.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar.vue';
 
 export default {
   props: ['owner'],
diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue
index c85da727..76be3df0 100644
--- a/client/src/components/portfolio/PortfolioOnboarding.vue
+++ b/client/src/components/portfolio/PortfolioOnboarding.vue
@@ -33,9 +33,9 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const PortfolioIllustration = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration')
+  import('@/components/illustrations/PortfolioIllustration.vue')
 );
-const CreateProjectButton = defineAsyncComponent(() => import('@/components/portfolio/CreateProjectButton'));
+const CreateProjectButton = defineAsyncComponent(() => import('@/components/portfolio/CreateProjectButton.vue'));
 export default {
   components: { CreateProjectButton, PortfolioIllustration },
 };
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 19a6289c..d40b0feb 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
 
 import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index 35c584bf..bc9c6765 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
 
 import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
 import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
@@ -57,7 +57,7 @@ import { dateFilter, dateTimeFilter } from '@/filters/date-filter';
 import { removeAtIndex } from '@/graphql/immutable-operations.ts';
 import { defineAsyncComponent } from 'vue';
 const DocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
+  import('@/components/content-blocks/DocumentBlock.vue')
 );
 
 export default {
diff --git a/client/src/components/portfolio/ProjectForm.vue b/client/src/components/portfolio/ProjectForm.vue
index 7f4f5e4e..76a94a04 100644
--- a/client/src/components/portfolio/ProjectForm.vue
+++ b/client/src/components/portfolio/ProjectForm.vue
@@ -35,8 +35,8 @@
 </template>
 
 <script>
-import PageForm from '@/components/page-form/PageForm';
-import PageFormInput from '@/components/page-form/PageFormInput';
+import PageForm from '@/components/page-form/PageForm.vue';
+import PageFormInput from '@/components/page-form/PageFormInput.vue';
 
 export default {
   props: {
diff --git a/client/src/components/portfolio/ProjectList.vue b/client/src/components/portfolio/ProjectList.vue
index 33fcc049..220e1421 100644
--- a/client/src/components/portfolio/ProjectList.vue
+++ b/client/src/components/portfolio/ProjectList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ProjectListItem from '@/components/portfolio/ProjectListItem';
+import ProjectListItem from '@/components/portfolio/ProjectListItem.vue';
 
 export default {
   props: {
diff --git a/client/src/components/portfolio/ProjectWidget.vue b/client/src/components/portfolio/ProjectWidget.vue
index ed1a333a..44e6c927 100644
--- a/client/src/components/portfolio/ProjectWidget.vue
+++ b/client/src/components/portfolio/ProjectWidget.vue
@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import OwnerWidget from '@/components/portfolio/OwnerWidget';
-import ProjectActions from '@/components/portfolio/ProjectActions';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-import WidgetFooter from '@/components/ui/WidgetFooter';
+import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
+import ProjectActions from '@/components/portfolio/ProjectActions.vue';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
+import WidgetFooter from '@/components/ui/WidgetFooter.vue';
 
 export default {
   props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
index a0f3e3a7..8dafe221 100644
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@@ -13,7 +13,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const ShareIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/ShareIcon'));
+const ShareIcon = defineAsyncComponent(() => import('@/components/icons/ShareIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/profile/ActivityEntry.vue b/client/src/components/profile/ActivityEntry.vue
index ee98670f..49813edd 100644
--- a/client/src/components/profile/ActivityEntry.vue
+++ b/client/src/components/profile/ActivityEntry.vue
@@ -19,7 +19,7 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const ChevronRight = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight')
+  import('@/components/icons/ChevronRight.vue')
 );
 
 export default {
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 0a97edd7..d77c22c8 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -38,9 +38,9 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 import { defineAsyncComponent } from 'vue';
 
 const DefaultAvatar = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DefaultAvatar')
+  import('@/components/icons/DefaultAvatar.vue')
 );
-const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon'));
+const PenIcon = defineAsyncComponent(() => import('@/components/icons/PenIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/profile/AvatarUploadForm.vue b/client/src/components/profile/AvatarUploadForm.vue
index 79fe5dd0..30963754 100644
--- a/client/src/components/profile/AvatarUploadForm.vue
+++ b/client/src/components/profile/AvatarUploadForm.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import ImageForm from '@/components/content-forms/ImageForm';
+import ImageForm from '@/components/content-forms/ImageForm.vue';
 
 export default {
   components: {
diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 19a8ad7c..8a6017e3 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -20,7 +20,7 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const LinkBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock')
+  import('@/components/content-blocks/LinkBlock.vue')
 );
 
 export default {
diff --git a/client/src/components/profile/DeactivatePerson.vue b/client/src/components/profile/DeactivatePerson.vue
index 04a2de1a..9188fe68 100644
--- a/client/src/components/profile/DeactivatePerson.vue
+++ b/client/src/components/profile/DeactivatePerson.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
+import Modal from '@/components/Modal.vue';
 
 export default {
   components: {
diff --git a/client/src/components/profile/EditGroupName.vue b/client/src/components/profile/EditGroupName.vue
index c2e0606e..3600aefb 100644
--- a/client/src/components/profile/EditGroupName.vue
+++ b/client/src/components/profile/EditGroupName.vue
@@ -10,7 +10,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon'));
+const PenIcon = defineAsyncComponent(() => import('@/components/icons/PenIcon.vue'));
 
 export default {
   components: {
diff --git a/client/src/components/profile/EditNameWizard.vue b/client/src/components/profile/EditNameWizard.vue
index 2afcdb9e..8a9fbbdd 100644
--- a/client/src/components/profile/EditNameWizard.vue
+++ b/client/src/components/profile/EditNameWizard.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal.vue';
+import ModalInput from '@/components/ModalInput.vue';
 
 export default {
   props: {
diff --git a/client/src/components/profile/EditTeamNameWizard.vue b/client/src/components/profile/EditTeamNameWizard.vue
index 32afc2b3..54913d61 100644
--- a/client/src/components/profile/EditTeamNameWizard.vue
+++ b/client/src/components/profile/EditTeamNameWizard.vue
@@ -10,7 +10,7 @@
 
 <script>
 import me from '@/mixins/me';
-import EditNameWizard from '@/components/profile/EditNameWizard';
+import EditNameWizard from '@/components/profile/EditNameWizard.vue';
 import UPDATE_TEAM_MUTATION from '@/graphql/gql/mutations/updateTeam.gql';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
diff --git a/client/src/components/profile/GroupList.vue b/client/src/components/profile/GroupList.vue
index 970c3a31..a1464c6e 100644
--- a/client/src/components/profile/GroupList.vue
+++ b/client/src/components/profile/GroupList.vue
@@ -93,7 +93,7 @@
 </template>
 
 <script>
-import EditGroupName from '@/components/profile/EditGroupName';
+import EditGroupName from '@/components/profile/EditGroupName.vue';
 
 export default {
   // props: ['active-members', 'inactive-members', 'name', 'canEdit'],
diff --git a/client/src/components/profile/InstrumentActivity.vue b/client/src/components/profile/InstrumentActivity.vue
index 59f5ee6c..22e14386 100644
--- a/client/src/components/profile/InstrumentActivity.vue
+++ b/client/src/components/profile/InstrumentActivity.vue
@@ -34,8 +34,8 @@
 
 <script>
 import { mapActions } from 'vuex';
-import ContentBookmark from '@/components/profile/ContentBookmark';
-import ActivityEntry from '@/components/profile/ActivityEntry';
+import ContentBookmark from '@/components/profile/ContentBookmark.vue';
+import ActivityEntry from '@/components/profile/ActivityEntry.vue';
 
 import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 import instrumentType from '@/helpers/instrumentType';
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 83d9f656..07ab1655 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -59,8 +59,8 @@
 
 <script>
 import { mapActions } from 'vuex';
-import ContentBookmark from '@/components/profile/ContentBookmark';
-import ActivityEntry from '@/components/profile/ActivityEntry';
+import ContentBookmark from '@/components/profile/ContentBookmark.vue';
+import ActivityEntry from '@/components/profile/ActivityEntry.vue';
 
 import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
diff --git a/client/src/components/profile/Profile.vue b/client/src/components/profile/Profile.vue
index 5ab97382..9576b52d 100644
--- a/client/src/components/profile/Profile.vue
+++ b/client/src/components/profile/Profile.vue
@@ -25,10 +25,10 @@
 <script>
 import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
-import Avatar from '@/components/profile/Avatar';
+import AvatarUploadForm from '@/components/profile/AvatarUploadForm.vue';
+import Avatar from '@/components/profile/Avatar.vue';
 import { defineAsyncComponent } from 'vue';
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 export default {
   components: {
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index ecdbc0ae..2e5b215f 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -76,16 +76,16 @@
 </template>
 
 <script>
-import ProfileWidget from '@/components/profile/ProfileWidget';
+import ProfileWidget from '@/components/profile/ProfileWidget.vue';
 
-import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
+import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget.vue';
 
 import sidebar from '@/mixins/sidebar';
 import me from '@/mixins/me';
-import LogoutWidget from '@/components/LogoutWidget';
+import LogoutWidget from '@/components/LogoutWidget.vue';
 import { MY_TEAM } from '@/router/me.names';
 import { defineAsyncComponent } from 'vue';
-const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon'));
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 
 export default {
   mixins: [sidebar, me],
diff --git a/client/src/components/profile/ProfileWidget.vue b/client/src/components/profile/ProfileWidget.vue
index f5554a44..b7962a13 100644
--- a/client/src/components/profile/ProfileWidget.vue
+++ b/client/src/components/profile/ProfileWidget.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar.vue';
 import { meQuery } from '@/graphql/queries';
 
 export default {
diff --git a/client/src/components/rooms/AddRoom.vue b/client/src/components/rooms/AddRoom.vue
index a4f5aae3..20c60a92 100644
--- a/client/src/components/rooms/AddRoom.vue
+++ b/client/src/components/rooms/AddRoom.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import AddWidget from '@/components/AddWidget';
+import AddWidget from '@/components/AddWidget.vue';
 
 export default {
   components: {
diff --git a/client/src/components/rooms/ChangeVisibility.vue b/client/src/components/rooms/ChangeVisibility.vue
index d46205fe..e24f50aa 100644
--- a/client/src/components/rooms/ChangeVisibility.vue
+++ b/client/src/components/rooms/ChangeVisibility.vue
@@ -49,8 +49,8 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import Radiobutton from '@/components/Radiobutton';
+import Modal from '@/components/Modal.vue';
+import Radiobutton from '@/components/Radiobutton.vue';
 
 export default {
   components: {
diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue
index 9c8ae58a..b23b22f5 100644
--- a/client/src/components/rooms/Comment.vue
+++ b/client/src/components/rooms/Comment.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import UserWidget from '@/components/UserWidget';
+import UserWidget from '@/components/UserWidget.vue';
 import { dateTimeFilter } from '@/filters/date-filter';
 
 export default {
diff --git a/client/src/components/rooms/CommentInput.vue b/client/src/components/rooms/CommentInput.vue
index ab75b48f..71ec5b54 100644
--- a/client/src/components/rooms/CommentInput.vue
+++ b/client/src/components/rooms/CommentInput.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import EmojiBar from '@/components/ui/EmojiBar';
+import EmojiBar from '@/components/ui/EmojiBar.vue';
 
 export default {
   props: {
diff --git a/client/src/components/rooms/EditRoom.vue b/client/src/components/rooms/EditRoom.vue
index 896ea28a..473859ed 100644
--- a/client/src/components/rooms/EditRoom.vue
+++ b/client/src/components/rooms/EditRoom.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import RoomForm from '@/components/rooms/RoomForm';
+import RoomForm from '@/components/rooms/RoomForm.vue';
 
 import UPDATE_ROOM_MUTATION from 'gql/mutations/rooms/updateRoom.gql';
 
diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
index 874b2240..637ae781 100644
--- a/client/src/components/rooms/EntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -9,7 +9,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon.vue';
 const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue'));
 
 export default {
diff --git a/client/src/components/rooms/MoreActions.vue b/client/src/components/rooms/MoreActions.vue
index 3f7d5779..f6f8ab14 100644
--- a/client/src/components/rooms/MoreActions.vue
+++ b/client/src/components/rooms/MoreActions.vue
@@ -19,9 +19,9 @@
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
 import { defineAsyncComponent } from 'vue';
-const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses'));
+const Ellipses = defineAsyncComponent(() => import('@/components/icons/Ellipses.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index 9e1fe6ea..7bb2d204 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -29,9 +29,9 @@ import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
 import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';
 
 import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
-import PopoverLink from '@/components/ui/PopoverLink';
+import PopoverLink from '@/components/ui/PopoverLink.vue';
 import { ROOMS_PAGE } from '@/router/room.names';
-import MoreActions from '@/components/rooms/MoreActions';
+import MoreActions from '@/components/rooms/MoreActions.vue';
 
 export default {
   props: {
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 2b42933e..14e4277c 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -52,10 +52,10 @@
 <script>
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-import UserMetaWidget from '@/components/UserMetaWidget';
+import UserMetaWidget from '@/components/UserMetaWidget.vue';
 import teaser from '@/helpers/teaser';
-import RoomEntryActions from '@/components/rooms/RoomEntryActions';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import RoomEntryActions from '@/components/rooms/RoomEntryActions.vue';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
 
 export default {
   props: ['title', 'author', 'contents', 'slug', 'id', 'comments'],
diff --git a/client/src/components/rooms/RoomForm.vue b/client/src/components/rooms/RoomForm.vue
index dfc042b0..210eef61 100644
--- a/client/src/components/rooms/RoomForm.vue
+++ b/client/src/components/rooms/RoomForm.vue
@@ -41,9 +41,9 @@
 </template>
 
 <script>
-import ColorChooser from '@/components/ColorChooser';
-import PageForm from '@/components/page-form/PageForm';
-import PageFormInput from '@/components/page-form/PageFormInput';
+import ColorChooser from '@/components/ColorChooser.vue';
+import PageForm from '@/components/page-form/PageForm.vue';
+import PageFormInput from '@/components/page-form/PageFormInput.vue';
 
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
diff --git a/client/src/components/rooms/RoomVisibilityWidget.vue b/client/src/components/rooms/RoomVisibilityWidget.vue
index 3a89520c..7370aac0 100644
--- a/client/src/components/rooms/RoomVisibilityWidget.vue
+++ b/client/src/components/rooms/RoomVisibilityWidget.vue
@@ -13,9 +13,9 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon'));
+const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
 const ClosedEyeIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon')
+  import('@/components/icons/ClosedEyeIcon.vue')
 );
 
 export default {
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index 539bbc32..3862b444 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-import WidgetFooter from '@/components/ui/WidgetFooter';
-import RoomActions from '@/components/rooms/RoomActions';
+import RoomGroupWidget from '@/components/rooms/RoomGroupWidget.vue';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
+import WidgetFooter from '@/components/ui/WidgetFooter.vue';
+import RoomActions from '@/components/rooms/RoomActions.vue';
 
 import { meQuery } from '@/graphql/queries';
 
diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue
index f7aa0f72..6938843c 100644
--- a/client/src/components/rooms/RoomsOnboarding.vue
+++ b/client/src/components/rooms/RoomsOnboarding.vue
@@ -30,7 +30,7 @@
 import { NEW_ROOM_PAGE } from '@/router/room.names';
 import { defineAsyncComponent } from 'vue';
 const RoomsIllustration = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration')
+  import('@/components/illustrations/RoomsIllustration.vue')
 );
 
 export default {
diff --git a/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue b/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
index 74cb1f3e..aa2a417b 100644
--- a/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
+++ b/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
@@ -13,7 +13,7 @@
 import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
 import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryByIdQuery.gql';
 
-import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm.vue';
 
 export default {
   components: {
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index a906b915..f1288801 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -53,17 +53,17 @@
 </template>
 
 <script>
-import WidgetPopover from '@/components/ui/WidgetPopover';
-import CurrentClass from '@/components/school-class/CurrentClass';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
+import CurrentClass from '@/components/school-class/CurrentClass.vue';
 
 import updateSelectedClassMixin from '@/mixins/update-selected-class';
 import sidebarMixin from '@/mixins/sidebar';
 import meMixin from '@/mixins/me';
 import { defineAsyncComponent } from 'vue';
 const ChevronDown = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown')
+  import('@/components/icons/ChevronDown.vue')
 );
-const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon'));
+const AddIcon = defineAsyncComponent(() => import('@/components/icons/AddIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/school-class/EditClassNameWizard.vue b/client/src/components/school-class/EditClassNameWizard.vue
index 6a9eb93c..9925ed99 100644
--- a/client/src/components/school-class/EditClassNameWizard.vue
+++ b/client/src/components/school-class/EditClassNameWizard.vue
@@ -11,7 +11,7 @@
 <script>
 import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 import UPDATE_SCHOOL_CLASS_MUTATION from '@/graphql/gql/mutations/updateSchoolClass.gql';
-import EditNameWizard from '@/components/profile/EditNameWizard';
+import EditNameWizard from '@/components/profile/EditNameWizard.vue';
 
 export default {
   components: {
diff --git a/client/src/components/snapshots/EditSnapshotTitleWizard.vue b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
index 85b150ef..eea25531 100644
--- a/client/src/components/snapshots/EditSnapshotTitleWizard.vue
+++ b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import EditNameWizard from '@/components/profile/EditNameWizard';
+import EditNameWizard from '@/components/profile/EditNameWizard.vue';
 
 export default {
   components: {
@@ -39,5 +39,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 </style>
diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index 40d4f0e1..8a6413dd 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import Toggle from '@/components/ui/Toggle';
+import Toggle from '@/components/ui/Toggle.vue';
 // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import { gql } from '@apollo/client/core';
 import { setModuleEditMode } from '@/graphql/cache-operations';
diff --git a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue b/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
index a4b1e693..4a05cb01 100644
--- a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
+++ b/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import Checkbox from '@/components/ui/Checkbox';
+import Checkbox from '@/components/ui/Checkbox.vue';
 import UPDATE_SOLUTION_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateSolutionVisibility.gql';
 import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
 
diff --git a/client/src/components/ui/BaseInput.vue b/client/src/components/ui/BaseInput.vue
index ed067eb8..845a31bf 100644
--- a/client/src/components/ui/BaseInput.vue
+++ b/client/src/components/ui/BaseInput.vue
@@ -35,8 +35,8 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick'));
-const CircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CircleIcon'));
+const Tick = defineAsyncComponent(() => import('@/components/icons/Tick.vue'));
+const CircleIcon = defineAsyncComponent(() => import('@/components/icons/CircleIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/ui/Checkbox.vue b/client/src/components/ui/Checkbox.vue
index 42f18af8..5168d3b4 100644
--- a/client/src/components/ui/Checkbox.vue
+++ b/client/src/components/ui/Checkbox.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import BaseInput from '@/components/ui/BaseInput';
+import BaseInput from '@/components/ui/BaseInput.vue';
 
 export default {
   props: {
diff --git a/client/src/components/ui/PopoverLink.vue b/client/src/components/ui/PopoverLink.vue
index 81781b14..6f973bd1 100644
--- a/client/src/components/ui/PopoverLink.vue
+++ b/client/src/components/ui/PopoverLink.vue
@@ -15,9 +15,9 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon'));
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
-const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon'));
+const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
+const PenIcon = defineAsyncComponent(() => import('@/components/icons/PenIcon.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
index 4818626c..a12d16fc 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
@@ -14,9 +14,9 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const SimpleFileUploadHiddenInput = defineAsyncComponent(() =>
-  import('@/components/ui/file-upload/SimpleFileUploadHiddenInput')
+  import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue')
 );
-const ButtonWithIconAndText = defineAsyncComponent(() => import('@/components/ui/ButtonWithIconAndText'));
+const ButtonWithIconAndText = defineAsyncComponent(() => import('@/components/ui/ButtonWithIconAndText.vue'));
 
 export default {
   props: ['value'],
diff --git a/client/src/components/ui/form-element-icons.js b/client/src/components/ui/form-element-icons.js
index b3cd57d5..04946250 100644
--- a/client/src/components/ui/form-element-icons.js
+++ b/client/src/components/ui/form-element-icons.js
@@ -1,31 +1,31 @@
 import { defineAsyncComponent } from 'vue';
-const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon'));
-const VideoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/VideoIcon'));
-const ImageIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/ImageIcon'));
-const TextIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TextIcon'));
+const LinkIcon = defineAsyncComponent(() => import('@/components/icons/LinkIcon.vue'));
+const VideoIcon = defineAsyncComponent(() => import('@/components/icons/VideoIcon.vue'));
+const ImageIcon = defineAsyncComponent(() => import('@/components/icons/ImageIcon.vue'));
+const TextIcon = defineAsyncComponent(() => import('@/components/icons/TextIcon.vue'));
 const SpeechBubbleIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/SpeechBubbleIcon')
+  import('@/components/icons/SpeechBubbleIcon.vue')
 );
 const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+  import('@/components/icons/DocumentIcon.vue')
 );
-const TitleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TitleIcon'));
+const TitleIcon = defineAsyncComponent(() => import('@/components/icons/TitleIcon.vue'));
 const DocumentWithLinesIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentWithLinesIcon')
+  import('@/components/icons/DocumentWithLinesIcon.vue')
 );
 const ArrowThinBottom = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinBottom')
+  import('@/components/icons/ArrowThinBottom.vue')
 );
 const ArrowThinDown = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinDown')
+  import('@/components/icons/ArrowThinDown.vue')
 );
 const ArrowThinTop = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinTop')
+  import('@/components/icons/ArrowThinTop.vue')
 );
 const ArrowThinUp = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinUp')
+  import('@/components/icons/ArrowThinUp.vue')
 );
-const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon'));
+const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 /*
   for icons with a single word, leave the *-icon name, to prevent conflicts
diff --git a/client/src/components/visibility/VisibilityAction.vue b/client/src/components/visibility/VisibilityAction.vue
index 208af2ea..9a6b4061 100644
--- a/client/src/components/visibility/VisibilityAction.vue
+++ b/client/src/components/visibility/VisibilityAction.vue
@@ -26,9 +26,9 @@ import { createVisibilityMutation, hidden } from '@/helpers/visibility';
 import { defineAsyncComponent } from 'vue';
 import { matomoTrackModuleVisibilityEvent } from '@/helpers/matomo-client';
 
-const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon'));
+const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
 const ClosedEyeIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon')
+  import('@/components/icons/ClosedEyeIcon.vue')
 );
 
 export default {
diff --git a/client/src/helpers/uploadcare.js b/client/src/helpers/uploadcare.js
index efdaabac..e2733ccd 100644
--- a/client/src/helpers/uploadcare.js
+++ b/client/src/helpers/uploadcare.js
@@ -1,5 +1,5 @@
-export const uploadcare = (component, callback, onStart = () => {}) =>
-  import(/* webpackChunkName: "uploadcare" */ 'uploadcare-widget').then((module) => {
+export const uploadcare = (component, callback, onStart = () => { }) =>
+  import('uploadcare-widget').then((module) => {
     const uploadcareWidget = module.default;
 
     const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index 3081e079..910e6255 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -61,8 +61,8 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 
-const HepLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogo'));
-const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo'));
+const HepLogo = defineAsyncComponent(() => import('@/components/icons/HepLogo.vue'));
+const EhbLogo = defineAsyncComponent(() => import('@/components/icons/EhbLogo.vue'));
 
 export default {
   components: {
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 4f2b9798..7486b9e2 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script>
-import HeaderBar from '@/components/HeaderBar';
-import ProfileSidebar from '@/components/profile/ProfileSidebar';
-import DefaultFooter from '@/layouts/DefaultFooter';
-import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
+import HeaderBar from '@/components/HeaderBar.vue';
+import ProfileSidebar from '@/components/profile/ProfileSidebar.vue';
+import DefaultFooter from '@/layouts/DefaultFooter.vue';
+import NavigationSidebar from '@/components/book-navigation/NavigationSidebar.vue';
 
 export default {
   components: {
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index 10349490..5a50e48f 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -16,7 +16,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon'));
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 
 export default {
   components: {
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index 5dbfda61..4e7fbb77 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -18,8 +18,8 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-import DefaultFooter from '@/layouts/DefaultFooter';
-const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));
+import DefaultFooter from '@/layouts/DefaultFooter.vue';
+const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
 
 export default {
   components: {
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 72c02422..630632dc 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import SimpleFooter from '@/layouts/SimpleFooter';
+import SimpleFooter from '@/layouts/SimpleFooter.vue';
 import { defineAsyncComponent } from 'vue';
-const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon'));
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
 
 export default {
   components: {
diff --git a/client/src/layouts/SplitLayout.vue b/client/src/layouts/SplitLayout.vue
index c45eaf00..ba2040e7 100644
--- a/client/src/layouts/SplitLayout.vue
+++ b/client/src/layouts/SplitLayout.vue
@@ -13,13 +13,13 @@
 import { defineAsyncComponent } from 'vue';
 import flavorValues from '@/helpers/app-flavor';
 const ContentsIllustration = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/ContentsIllustration')
+  import('@/components/illustrations/ContentsIllustration.vue')
 );
 const PortfolioIllustration = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration')
+  import('@/components/illustrations/PortfolioIllustration.vue')
 );
 const RoomsIllustration = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration')
+  import('@/components/illustrations/RoomsIllustration.vue')
 );
 
 const Hello = flavorValues.helloIllustration;
diff --git a/client/src/mixins/room.js b/client/src/mixins/room.js
index e8a3be98..95c33eae 100644
--- a/client/src/mixins/room.js
+++ b/client/src/mixins/room.js
@@ -1,8 +1,8 @@
 import AddRoomEntryButton from '@/components/rooms/AddRoomEntryButton.vue';
 import RoomEntry from '@/components/rooms/RoomEntry.vue';
-import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-import RoomActions from '@/components/rooms/RoomActions';
+import RoomGroupWidget from '@/components/rooms/RoomGroupWidget.vue';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
+import RoomActions from '@/components/rooms/RoomActions.vue';
 
 export default {
   components: {
@@ -17,7 +17,7 @@ export default {
     this.$store.dispatch('setSpecialContainerClass', '');
   },
 
-  created() {},
+  created() { },
 
   data() {
     return {
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index bf2875cf..e96bc9da 100644
--- a/client/src/pages/activity.vue
+++ b/client/src/pages/activity.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import ModuleActivity from '@/components/profile/ModuleActivity';
-import InstrumentActivity from '@/components/profile/InstrumentActivity';
-import ActivityFilter from '@/components/profile/ActivityFilter';
+import ModuleActivity from '@/components/profile/ModuleActivity.vue';
+import InstrumentActivity from '@/components/profile/InstrumentActivity.vue';
+import ActivityFilter from '@/components/profile/ActivityFilter.vue';
 import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
 
 export default {
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index 44d08746..f206cbc1 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -32,34 +32,34 @@
 
 <script>
 import log from 'loglevel';
-import UserMetaWidget from '@/components/UserMetaWidget';
+import UserMetaWidget from '@/components/UserMetaWidget.vue';
 
 import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
 import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
-import CommentInput from '@/components/rooms/CommentInput';
-import Comment from '@/components/rooms/Comment';
+import CommentInput from '@/components/rooms/CommentInput.vue';
+import Comment from '@/components/rooms/Comment.vue';
 import { defineAsyncComponent } from 'vue';
 import { matomoTrackPageView } from '@/helpers/matomo-client';
 const TextBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock')
+  import('@/components/content-blocks/TextBlock.vue')
 );
 const ImageBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageBlock')
+  import('@/components/content-blocks/ImageBlock.vue')
 );
 const ImageUrlBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageUrlBlock')
+  import('@/components/content-blocks/ImageUrlBlock.vue')
 );
 const VideoBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/VideoBlock')
+  import('@/components/content-blocks/VideoBlock.vue')
 );
 const LinkBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock')
+  import('@/components/content-blocks/LinkBlock.vue')
 );
 const DocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
+  import('@/components/content-blocks/DocumentBlock.vue')
 );
 const SubtitleBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock')
+  import('@/components/content-blocks/SubtitleBlock.vue')
 );
 
 export default {
diff --git a/client/src/pages/beta-login.vue b/client/src/pages/beta-login.vue
index 0ea3f435..71359937 100644
--- a/client/src/pages/beta-login.vue
+++ b/client/src/pages/beta-login.vue
@@ -83,7 +83,7 @@
 import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
 import { Form, Field, ErrorMessage } from 'vee-validate';
 import { defineComponent } from 'vue';
-import InputWrapper from '@/components/validation/InputWrapper';
+import InputWrapper from '@/components/validation/InputWrapper.vue';
 
 export default defineComponent({
   components: {
diff --git a/client/src/pages/createClass.vue b/client/src/pages/createClass.vue
index e2286a29..869680e1 100644
--- a/client/src/pages/createClass.vue
+++ b/client/src/pages/createClass.vue
@@ -17,7 +17,7 @@
 import addSchoolClassMixin from '@/mixins/add-school-class';
 
 import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
-import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm.vue';
 
 export default {
   mixins: [addSchoolClassMixin],
diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index 054c39d6..64705765 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -10,7 +10,7 @@
 <script>
 import { defineComponent } from 'vue';
 
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm.vue';
 import { setUserBlockType } from '@/helpers/content-block';
 import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
diff --git a/client/src/pages/editContentBlock.vue b/client/src/pages/editContentBlock.vue
index 03b710c6..864da719 100644
--- a/client/src/pages/editContentBlock.vue
+++ b/client/src/pages/editContentBlock.vue
@@ -9,14 +9,14 @@
 
 <script>
 import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm.vue';
 
 import EDIT_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/editContentBlock.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import { setUserBlockType } from '@/helpers/content-block';
 import { cleanUpContents, simplifyContents } from '@/components/content-block-form/helpers';
 
-// import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+// import ContentBlockForm from '@/components/content-block-form/ContentBlockForm.vue';
 
 export default {
   props: {
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index e9ba2ed2..63980292 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -79,10 +79,10 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const HepLogoNoClaim = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogoNoClaim')
+  import('@/components/icons/HepLogoNoClaim.vue')
 );
-const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo'));
-const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));
+const EhbLogo = defineAsyncComponent(() => import('@/components/icons/EhbLogo.vue'));
+const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
 
 export default {
   components: {
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 9ee1755c..cb269f20 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -31,7 +31,7 @@ import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
 import { defineAsyncComponent } from 'vue';
 const ContentComponent = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent')
+  import('@/components/content-blocks/ContentComponent.vue')
 );
 
 export default {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 90e6c5de..12a5b30b 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import InstrumentFilter from '@/components/instruments/InstrumentFilter';
-import InstrumentEntry from '@/components/instruments/InstrumentEntry';
+import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
+import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
diff --git a/client/src/pages/joinClass.vue b/client/src/pages/joinClass.vue
index c4bec183..58d7490a 100644
--- a/client/src/pages/joinClass.vue
+++ b/client/src/pages/joinClass.vue
@@ -19,7 +19,7 @@ import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 import addSchoolClass from '@/mixins/add-school-class';
 import logout from '@/mixins/logout';
 
-import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm.vue';
 
 export default {
   mixins: [addSchoolClass, logout],
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index 6f8a1e82..8defdbd5 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -89,13 +89,13 @@
 import { defineComponent } from 'vue';
 import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-import LoadingButton from '@/components/LoadingButton';
+import LoadingButton from '@/components/LoadingButton.vue';
 
 import me from '@/mixins/me';
 import logout from '@/mixins/logout';
 
 import { Form, Field, ErrorMessage } from 'vee-validate';
-import InputWrapper from '@/components/validation/InputWrapper';
+import InputWrapper from '@/components/validation/InputWrapper.vue';
 
 export default defineComponent({
   mixins: [me, logout],
diff --git a/client/src/pages/me/createTeam.vue b/client/src/pages/me/createTeam.vue
index d2eba2dd..55808fe3 100644
--- a/client/src/pages/me/createTeam.vue
+++ b/client/src/pages/me/createTeam.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm.vue';
 
 import CREATE_TEAM_MUTATION from '@/graphql/gql/mutations/createTeam.gql';
 import { MY_TEAM } from '@/router/me.names';
diff --git a/client/src/pages/me/joinTeam.vue b/client/src/pages/me/joinTeam.vue
index 37b257b2..8ac01e13 100644
--- a/client/src/pages/me/joinTeam.vue
+++ b/client/src/pages/me/joinTeam.vue
@@ -14,7 +14,7 @@
 <script>
 import JOIN_TEAM_MUTATION from '@/graphql/gql/mutations/joinTeam.gql';
 
-import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm.vue';
 import { MY_TEAM } from '@/router/me.names';
 import addTeam from '@/helpers/add-team';
 
diff --git a/client/src/pages/me/myTeam.vue b/client/src/pages/me/myTeam.vue
index ca283a3f..8fc2f548 100644
--- a/client/src/pages/me/myTeam.vue
+++ b/client/src/pages/me/myTeam.vue
@@ -41,7 +41,7 @@
 <script>
 import { CREATE_TEAM, JOIN_TEAM, SHOW_TEAM_CODE } from '@/router/me.names';
 import me from '@/mixins/me';
-import GroupList from '@/components/profile/GroupList';
+import GroupList from '@/components/profile/GroupList.vue';
 import LEAVE_TEAM_MUTATION from 'gql/mutations/me/leaveTeam.gql';
 import addTeam from '@/helpers/add-team';
 
diff --git a/client/src/pages/me/showSchoolClassCode.vue b/client/src/pages/me/showSchoolClassCode.vue
index 2ff1211b..8bc044a5 100644
--- a/client/src/pages/me/showSchoolClassCode.vue
+++ b/client/src/pages/me/showSchoolClassCode.vue
@@ -9,7 +9,7 @@
 
 <script>
 import selectedClassMixin from '@/mixins/selected-class';
-import ShowCode from '@/components/profile/ShowCode';
+import ShowCode from '@/components/profile/ShowCode.vue';
 
 export default {
   mixins: [selectedClassMixin],
diff --git a/client/src/pages/me/showTeamCode.vue b/client/src/pages/me/showTeamCode.vue
index 508f6de6..effe76cb 100644
--- a/client/src/pages/me/showTeamCode.vue
+++ b/client/src/pages/me/showTeamCode.vue
@@ -9,7 +9,7 @@
 
 <script>
 import me from '@/mixins/me';
-import ShowCode from '@/components/profile/ShowCode';
+import ShowCode from '@/components/profile/ShowCode.vue';
 
 export default {
   mixins: [me],
diff --git a/client/src/pages/module/module.vue b/client/src/pages/module/module.vue
index 96b0bdf1..25d5cf21 100644
--- a/client/src/pages/module/module.vue
+++ b/client/src/pages/module/module.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import Module from '@/components/modules/Module';
+  import Module from '@/components/modules/Module.vue';
   import log from 'loglevel';
 
   import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
diff --git a/client/src/pages/module/moduleSettings.vue b/client/src/pages/module/moduleSettings.vue
index 0e33ef9c..bee93148 100644
--- a/client/src/pages/module/moduleSettings.vue
+++ b/client/src/pages/module/moduleSettings.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
+import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule.vue';
 
 export default {
   components: {
diff --git a/client/src/pages/module/moduleVisibility.vue b/client/src/pages/module/moduleVisibility.vue
index ab43336d..10ab01fa 100644
--- a/client/src/pages/module/moduleVisibility.vue
+++ b/client/src/pages/module/moduleVisibility.vue
@@ -47,11 +47,11 @@
 import me from '@/mixins/me';
 
 import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import { MODULE_PAGE } from '@/router/module.names';
 
 import { defineAsyncComponent } from 'vue';
-const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon'));
+const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
 
 export default {
   mixins: [me],
diff --git a/client/src/pages/myClass.vue b/client/src/pages/myClass.vue
index 992970ff..bdcaa92b 100644
--- a/client/src/pages/myClass.vue
+++ b/client/src/pages/myClass.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import GroupList from '@/components/profile/GroupList';
+import GroupList from '@/components/profile/GroupList.vue';
 
 import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
diff --git a/client/src/pages/news.vue b/client/src/pages/news.vue
index e0c52a8b..d8fd4791 100644
--- a/client/src/pages/news.vue
+++ b/client/src/pages/news.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import NewsTeasers from '@/components/news/NewsTeasers';
+import NewsTeasers from '@/components/news/NewsTeasers.vue';
 
 export default {
   components: { NewsTeasers },
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index 1bcb8e78..7e560d0e 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -9,7 +9,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo'));
+const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));
 
 export default {
   components: {
diff --git a/client/src/pages/portfolio/editProject.vue b/client/src/pages/portfolio/editProject.vue
index 5e154810..605cae45 100644
--- a/client/src/pages/portfolio/editProject.vue
+++ b/client/src/pages/portfolio/editProject.vue
@@ -9,7 +9,7 @@
 
 <script>
 // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
-import EditProject from '@/components/portfolio/EditProject';
+import EditProject from '@/components/portfolio/EditProject.vue';
 
 import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
 
diff --git a/client/src/pages/portfolio/newProject.vue b/client/src/pages/portfolio/newProject.vue
index ed0c22e5..9918f117 100644
--- a/client/src/pages/portfolio/newProject.vue
+++ b/client/src/pages/portfolio/newProject.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import ProjectForm from '@/components/portfolio/ProjectForm';
+import ProjectForm from '@/components/portfolio/ProjectForm.vue';
 
 import ADD_PROJECT_MUTATION from '@/graphql/gql/mutations/addProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
diff --git a/client/src/pages/portfolio/portfolio.vue b/client/src/pages/portfolio/portfolio.vue
index 31bea0da..e7e1f66e 100644
--- a/client/src/pages/portfolio/portfolio.vue
+++ b/client/src/pages/portfolio/portfolio.vue
@@ -19,9 +19,9 @@
 
 <script>
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
-import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
-import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
-import ProjectList from '@/components/portfolio/ProjectList';
+import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding.vue';
+import CreateProjectButton from '@/components/portfolio/CreateProjectButton.vue';
+import ProjectList from '@/components/portfolio/ProjectList.vue';
 
 import me from '@/mixins/me';
 
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index e2234a66..c923913f 100644
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@@ -59,16 +59,16 @@
 </template>
 
 <script>
-import ProjectEntry from '@/components/portfolio/ProjectEntry';
-import ProjectActions from '@/components/portfolio/ProjectActions';
-import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-import OwnerWidget from '@/components/portfolio/OwnerWidget';
+import ProjectEntry from '@/components/portfolio/ProjectEntry.vue';
+import ProjectActions from '@/components/portfolio/ProjectActions.vue';
+import AddProjectEntry from '@/components/portfolio/AddProjectEntry.vue';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
+import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
 
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-import BackLink from '@/components/BackLink';
-import ShareLink from '@/components/portfolio/ShareLink';
+import BackLink from '@/components/BackLink.vue';
+import ShareLink from '@/components/portfolio/ShareLink.vue';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
 
diff --git a/client/src/pages/rooms/editRoom.vue b/client/src/pages/rooms/editRoom.vue
index 2bc16766..0d39b135 100644
--- a/client/src/pages/rooms/editRoom.vue
+++ b/client/src/pages/rooms/editRoom.vue
@@ -9,7 +9,7 @@
 
 <script>
 // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
-import EditRoom from '@/components/rooms/EditRoom';
+import EditRoom from '@/components/rooms/EditRoom.vue';
 
 import ROOM_QUERY from 'gql/queries/roomQuery.gql';
 
diff --git a/client/src/pages/rooms/editRoomEntry.vue b/client/src/pages/rooms/editRoomEntry.vue
index c592a102..9c4d18c1 100644
--- a/client/src/pages/rooms/editRoomEntry.vue
+++ b/client/src/pages/rooms/editRoomEntry.vue
@@ -15,7 +15,7 @@ import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
 import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
 import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
 
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm.vue';
 import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
 import { ROOM_PAGE } from '@/router/room.names';
 
diff --git a/client/src/pages/rooms/newRoom.vue b/client/src/pages/rooms/newRoom.vue
index 9b4259ed..d06f8c73 100644
--- a/client/src/pages/rooms/newRoom.vue
+++ b/client/src/pages/rooms/newRoom.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import RoomForm from '@/components/rooms/RoomForm';
+import RoomForm from '@/components/rooms/RoomForm.vue';
 
 import ADD_ROOM_MUTATION from 'gql/mutations/rooms/addRoom.gql';
 import ROOMS_QUERY from 'gql/queries/roomsQuery.gql';
diff --git a/client/src/pages/rooms/newRoomEntry.vue b/client/src/pages/rooms/newRoomEntry.vue
index a47b8369..dadcccc5 100644
--- a/client/src/pages/rooms/newRoomEntry.vue
+++ b/client/src/pages/rooms/newRoomEntry.vue
@@ -15,7 +15,7 @@ import NEW_MODULE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addModuleRoomEnt
 import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
 import me from '@/mixins/me';
 
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm.vue';
 import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
 import { ROOM_PAGE, MODULE_ROOM_PAGE } from '@/router/room.names';
 
diff --git a/client/src/pages/rooms/room.vue b/client/src/pages/rooms/room.vue
index c88b1814..74295cd6 100644
--- a/client/src/pages/rooms/room.vue
+++ b/client/src/pages/rooms/room.vue
@@ -57,8 +57,8 @@
 import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
 import room from '@/mixins/room';
 import me from '@/mixins/me';
-import BackLink from '@/components/BackLink';
-import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget';
+import BackLink from '@/components/BackLink.vue';
+import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget.vue';
 import { ROOMS_PAGE } from '@/router/room.names';
 
 export default {
diff --git a/client/src/pages/rooms/rooms.vue b/client/src/pages/rooms/rooms.vue
index 169601af..ce58ece0 100644
--- a/client/src/pages/rooms/rooms.vue
+++ b/client/src/pages/rooms/rooms.vue
@@ -27,7 +27,7 @@ import ME_QUERY from 'gql/queries/meQuery.gql';
 
 import RoomWidget from '@/components/rooms/RoomWidget.vue';
 import AddRoom from '@/components/rooms/AddRoom.vue';
-import RoomsOnboarding from '@/components/rooms/RoomsOnboarding';
+import RoomsOnboarding from '@/components/rooms/RoomsOnboarding.vue';
 
 export default {
   components: {
diff --git a/client/src/pages/snapshot/snapshot.vue b/client/src/pages/snapshot/snapshot.vue
index f051b09d..d7f77487 100644
--- a/client/src/pages/snapshot/snapshot.vue
+++ b/client/src/pages/snapshot/snapshot.vue
@@ -18,8 +18,8 @@
 <script>
 import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
 
-import Module from '@/components/modules/Module';
-import SnapshotHeader from '@/components/modules/SnapshotHeader';
+import Module from '@/components/modules/Module.vue';
+import SnapshotHeader from '@/components/modules/SnapshotHeader.vue';
 
 export default {
   props: {
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index f22c2d53..e0650204 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import SnapshotListItem from '@/components/modules/SnapshotListItem';
+import SnapshotListItem from '@/components/modules/SnapshotListItem.vue';
 import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
-import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
+import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu.vue';
 
 const defaultModule = { topic: {}, snapshots: [] };
 
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index 8d17a81d..6e4fc9a7 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -73,7 +73,7 @@
 </template>
 <script>
 import NewsTeaser from '@/components/news/NewsTeaser.vue';
-import ModuleTeaser from '@/components/modules/ModuleTeaser';
+import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
 
 import meQuery from '@/mixins/me';
 import news from '@/mixins/news';
diff --git a/client/src/pages/studentSubmission.vue b/client/src/pages/studentSubmission.vue
index 356453a0..6a6a450f 100644
--- a/client/src/pages/studentSubmission.vue
+++ b/client/src/pages/studentSubmission.vue
@@ -50,14 +50,14 @@ import debounce from 'lodash/debounce';
 import cloneDeep from 'lodash/cloneDeep';
 import log from 'loglevel';
 
-import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
+import StudentSubmissionDocument from '@/components/StudentSubmissionDocument.vue';
 import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/queries/studentSubmissionQuery.gql';
 import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
 import UPDATE_FEEDBACK_WITH_TEXT_MUTATION from '@/graphql/gql/mutations/updateFeedbackWithText.gql';
 import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm.vue';
 
 import me from '@/mixins/me';
-import EmojiBar from '@/components/ui/EmojiBar';
+import EmojiBar from '@/components/ui/EmojiBar.vue';
 
 export default {
   mixins: [me],
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index d793b1a3..54bc94e9 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
+import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions.vue';
 import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/queries/assignmentWithSubmissionsQuery.gql';
 
 export default {
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index cabe02ce..14dd6cce 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -39,8 +39,7 @@ import { defineAsyncComponent } from 'vue';
 import { matomoTrackEvent } from '@/helpers/matomo-client';
 const Solution = defineAsyncComponent(() =>
   import(
-    /* webpackChunkName: "content-components"
-     */ '@/components/content-blocks/Solution'
+     '@/components/content-blocks/Solution.vue'
   )
 );
 
diff --git a/client/src/pages/topic-page.vue b/client/src/pages/topic-page.vue
index 50a2d769..648e6735 100644
--- a/client/src/pages/topic-page.vue
+++ b/client/src/pages/topic-page.vue
@@ -49,13 +49,13 @@ import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
 import { defineAsyncComponent } from 'vue';
 import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
 import me from '@/mixins/me';
-import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+import TopicNavigation from '@/components/book-navigation/TopicNavigation.vue';
 
 import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-const PlayIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Play'));
-const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon'));
+const PlayIcon = defineAsyncComponent(() => import('@/components/icons/Play.vue'));
+const BulbIcon = defineAsyncComponent(() => import('@/components/icons/BulbIcon.vue'));
 
 export default {
   mixins: [me],
diff --git a/client/src/router/auth.routes.js b/client/src/router/auth.routes.js
index 3d3d35a5..ff7af719 100644
--- a/client/src/router/auth.routes.js
+++ b/client/src/router/auth.routes.js
@@ -1,9 +1,9 @@
 import { LICENSE_ACTIVATION } from '@/router/auth.names';
 
-const hello = () => import(/* webpackChunkName: "auth" */ '@/pages/hello');
-const betaLogin = () => import(/* webpackChunkName: "auth" */ '@/pages/beta-login');
-const loginError = () => import(/* webpackChunkName: "auth" */ '@/pages/login-error');
-const licenseActivation = () => import(/* webpackChunkName: "auth" */ '@/pages/license-activation');
+const hello = () => import('@/pages/hello.vue');
+const betaLogin = () => import('@/pages/beta-login.vue');
+const loginError = () => import('@/pages/login-error.vue');
+const licenseActivation = () => import('@/pages/license-activation.vue');
 
 export default [
   {
diff --git a/client/src/router/index.js b/client/src/router/index.js
index c98d6e81..89ebe2cb 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -11,25 +11,25 @@ import { store } from '@/store';
 import { LAYOUT_SIMPLE } from '@/router/core.constants';
 import { EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE } from './oauth.names';
 
-import start from '@/pages/start';
+import start from '@/pages/start.vue';
 import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
 import { matomoTrackPageView } from '@/helpers/matomo-client';
 
-const instrument = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrument');
-const instrumentOverview = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrumentOverview');
+const instrument = () => import('@/pages/instrument.vue');
+const instrumentOverview = () => import('@/pages/instrumentOverview.vue');
 
-const article = () => import(/* webpackChunkName: "news" */ '@/pages/article');
-const news = () => import(/* webpackChunkName: "news" */ '@/pages/news');
+const article = () => import('@/pages/article.vue');
+const news = () => import('@/pages/news.vue');
 
-const surveyPage = () => import(/* webpackChunkName: "survey" */ '@/pages/survey');
+const surveyPage = () => import('@/pages/survey.vue');
 
-const styleGuidePage = () => import('@/pages/styleguide');
-const joinClass = () => import('@/pages/joinClass');
+const styleGuidePage = () => import('@/pages/styleguide.vue');
+const joinClass = () => import('@/pages/joinClass.vue');
 
-const topic = () => import('@/pages/topic-page');
+const topic = () => import('@/pages/topic-page.vue');
 
-const p404 = () => import('@/pages/p404');
-const submission = () => import('@/pages/studentSubmission');
+const p404 = () => import('@/pages/p404.vue');
+const submission = () => import('@/pages/studentSubmission.vue');
 
 const postLoginRedirectUrlKey = 'postLoginRedirectionUrl';
 
diff --git a/client/src/router/me.routes.js b/client/src/router/me.routes.js
index f25f2760..91ebe565 100644
--- a/client/src/router/me.routes.js
+++ b/client/src/router/me.routes.js
@@ -1,17 +1,17 @@
 import { CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE } from './me.names';
 import { LAYOUT_SIMPLE } from '@/router/core.constants';
 
-const profilePage = () => import(/* webpackChunkName: "profile" */ '@/pages/profile');
-const profile = () => import(/* webpackChunkName: "profile" */ '@/components/profile/Profile');
-const myClass = () => import(/* webpackChunkName: "profile" */ '@/pages/myClass');
-const activity = () => import(/* webpackChunkName: "profile" */ '@/pages/activity');
-const oldClasses = () => import(/* webpackChunkName: "profile" */ '@/pages/oldClasses');
-const createClass = () => import(/* webpackChunkName: "profile" */ '@/pages/createClass');
-const showSchoolClassCode = () => import(/* webpackChunkName: "profile" */ '@/pages/me/showSchoolClassCode');
-const showTeamCode = () => import(/* webpackChunkName: "profile" */ '@/pages/me/showTeamCode');
-const myTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/myTeam');
-const joinTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/joinTeam');
-const createTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/createTeam');
+const profilePage = () => import('@/pages/profile.vue');
+const profile = () => import('@/components/profile/Profile.vue');
+const myClass = () => import('@/pages/myClass.vue');
+const activity = () => import('@/pages/activity.vue');
+const oldClasses = () => import('@/pages/oldClasses.vue');
+const createClass = () => import('@/pages/createClass.vue');
+const showSchoolClassCode = () => import('@/pages/me/showSchoolClassCode.vue');
+const showTeamCode = () => import('@/pages/me/showTeamCode.vue');
+const myTeam = () => import('@/pages/me/myTeam.vue');
+const joinTeam = () => import('@/pages/me/joinTeam.vue');
+const createTeam = () => import('@/pages/me/createTeam.vue');
 
 export default [
   {
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index 8090a8eb..f19c6b5b 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -10,16 +10,16 @@ import {
   VISIBILITY_PAGE,
 } from '@/router/module.names';
 import { LAYOUT_SIMPLE } from '@/router/core.constants';
-import createContentBlock from '@/pages/createContentBlock';
-import editContentBlock from '@/pages/editContentBlock';
+import createContentBlock from '@/pages/createContentBlock.vue';
+import editContentBlock from '@/pages/editContentBlock.vue';
 
-const moduleBase = () => import(/* webpackChunkName: "modules" */ '@/pages/module/module-base');
-const module = () => import(/* webpackChunkName: "modules" */ '@/pages/module/module');
-const submissions = () => import(/* webpackChunkName: "modules" */ '@/pages/submissions');
-const moduleVisibility = () => import(/* webpackChunkName: "modules" */ '@/pages/module/moduleVisibility');
-const settingsPage = () => import(/* webpackChunkName: "modules" */ '@/pages/module/moduleSettings');
-const snapshots = () => import(/* webpackChunkName: "modules" */ '@/pages/snapshot/snapshots');
-const snapshot = () => import(/* webpackChunkName: "modules" */ '@/pages/snapshot/snapshot');
+const moduleBase = () => import('@/pages/module/module-base.vue');
+const module = () => import('@/pages/module/module.vue');
+const submissions = () => import('@/pages/submissions.vue');
+const moduleVisibility = () => import('@/pages/module/moduleVisibility.vue');
+const settingsPage = () => import('@/pages/module/moduleSettings.vue');
+const snapshots = () => import('@/pages/snapshot/snapshots.vue');
+const snapshot = () => import('@/pages/snapshot/snapshot.vue');
 const contentBlockLocator = () => import(/* webpackChunkName: "modules" */ '@/pages/contentBlockLocator.vue');
 
 const contentBlockFormMeta = {
diff --git a/client/src/router/portfolio.routes.js b/client/src/router/portfolio.routes.js
index 80f38a22..18f583c4 100644
--- a/client/src/router/portfolio.routes.js
+++ b/client/src/router/portfolio.routes.js
@@ -1,10 +1,10 @@
 import { NEW_PROJECT_PAGE, PROJECTS_PAGE } from '@/router/portfolio.names';
 import flavorValues from '@/helpers/app-flavor';
 
-const portfolio = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/portfolio');
-const project = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/project');
-const newProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/newProject');
-const editProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/editProject');
+const portfolio = () => import('@/pages/portfolio/portfolio.vue');
+const project = () => import('@/pages/portfolio/project.vue');
+const newProject = () => import('@/pages/portfolio/newProject.vue');
+const editProject = () => import('@/pages/portfolio/editProject.vue');
 
 const portfolioRoutes = [
   { path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: { hideFooter: true, matomoUrl: '/portfolio/' } },
diff --git a/client/src/router/room.routes.js b/client/src/router/room.routes.js
index d436610d..31c16202 100644
--- a/client/src/router/room.routes.js
+++ b/client/src/router/room.routes.js
@@ -8,13 +8,13 @@ import {
   MODULE_ROOM_PAGE,
 } from '@/router/room.names';
 
-const rooms = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/rooms');
-const newRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/newRoom');
-const editRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/editRoom');
-const room = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/room');
-const newRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/newRoomEntry');
-const editRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/editRoomEntry');
-const moduleRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/module/moduleRoom');
+const rooms = () => import('@/pages/rooms/rooms.vue');
+const newRoom = () => import('@/pages/rooms/newRoom.vue');
+const editRoom = () => import('@/pages/rooms/editRoom.vue');
+const room = () => import('@/pages/rooms/room.vue');
+const newRoomEntry = () => import('@/pages/rooms/newRoomEntry.vue');
+const editRoomEntry = () => import('@/pages/rooms/editRoomEntry.vue');
+const moduleRoom = () => import('@/pages/module/moduleRoom.vue');
 
 function matomoRoomWithSlugCallback(route) {
   return `/room/${route.params.slug}/`;
diff --git a/client/tests/unit/checkbox.spec.js b/client/tests/unit/checkbox.spec.js
index 018cb8f8..ff56d72a 100644
--- a/client/tests/unit/checkbox.spec.js
+++ b/client/tests/unit/checkbox.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Checkbox from '@/components/ui/BaseInput';
+import Checkbox from '@/components/ui/BaseInput.vue';
 
 describe('Checkbox.vue', () => {
   it('should display the provided props', async () => {
diff --git a/client/tests/unit/class-selection-widget.spec.js b/client/tests/unit/class-selection-widget.spec.js
index 1da46f69..4bb6ede6 100644
--- a/client/tests/unit/class-selection-widget.spec.js
+++ b/client/tests/unit/class-selection-widget.spec.js
@@ -8,7 +8,7 @@ import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 import DELETE_MODULE_NODES from '@/graphql/gql/local/mutations/deleteModuleNodes.gql';
 import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 
-import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
+import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget.vue';
 
 // https://dev.to/n_tepluhina/testing-vue-apollo-2020-edition-2l2p
 
diff --git a/client/tests/unit/comment-input.spec.js b/client/tests/unit/comment-input.spec.js
index 860788da..28b180ad 100644
--- a/client/tests/unit/comment-input.spec.js
+++ b/client/tests/unit/comment-input.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import CommentInput from '@/components/rooms/CommentInput';
+import CommentInput from '@/components/rooms/CommentInput.vue';
 
 describe('CommentInput.vue', () => {
   it('should clear input after submit', async () => {
diff --git a/client/tests/unit/module-navigation.spec.js b/client/tests/unit/module-navigation.spec.js
index ee4f5d58..6b611c9b 100644
--- a/client/tests/unit/module-navigation.spec.js
+++ b/client/tests/unit/module-navigation.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import ModuleNavigation from '@/components/modules/ModuleNavigation';
+import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
 
 describe('ModuleNavigation.vue', () => {
   it('should flatten an array', () => {
diff --git a/client/tests/unit/text-form.spec.js b/client/tests/unit/text-form.spec.js
index fd5517bd..4b3b9a11 100644
--- a/client/tests/unit/text-form.spec.js
+++ b/client/tests/unit/text-form.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import TextForm from '@/components/content-forms/TextForm';
+import TextForm from '@/components/content-forms/TextForm.vue';
 
 describe('TextForm.vue', () => {
   it('should emit user input and its index', async () => {
diff --git a/client/tests/unit/toggle.spec.js b/client/tests/unit/toggle.spec.js
index 955550a6..fa5c3d8a 100644
--- a/client/tests/unit/toggle.spec.js
+++ b/client/tests/unit/toggle.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Toggle from '@/components/ui/Toggle';
+import Toggle from '@/components/ui/Toggle.vue';
 
 describe('Toggle.vue', () => {
   it.skip('should toggle the input value from true to false and back', async () => {