diff --git a/apps/comments/src/comments-app.js b/apps/comments/src/comments-app.js
index c42481029ce..eca3deb8b24 100644
--- a/apps/comments/src/comments-app.js
+++ b/apps/comments/src/comments-app.js
@@ -20,7 +20,7 @@
  *
  */
 
-import CommentsInstance from './services/CommentsInstance'
+import CommentsInstance from './services/CommentsInstance.js'
 
 // Init Comments
 if (window.OCA && !window.OCA.Comments) {
diff --git a/apps/comments/src/comments.js b/apps/comments/src/comments.js
index 95e6d3d5dc7..076c42894e3 100644
--- a/apps/comments/src/comments.js
+++ b/apps/comments/src/comments.js
@@ -21,9 +21,9 @@
  *
  */
 
-import './app'
-import './templates'
-import './filesplugin'
-import './activitytabviewplugin'
+import './app.js'
+import './templates.js'
+import './filesplugin.js'
+import './activitytabviewplugin.js'
 
 window.OCA.Comments = OCA.Comments
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index df9a22a1709..0c9a8b1e418 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -104,17 +104,17 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import moment from '@nextcloud/moment'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable'
-import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor'
-import ArrowRight from 'vue-material-design-icons/ArrowRight'
-
-import Moment from './Moment'
-import CommentMixin from '../mixins/CommentMixin'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+
+import Moment from './Moment.vue'
+import CommentMixin from '../mixins/CommentMixin.js'
 
 export default {
 	name: 'Comment',
diff --git a/apps/comments/src/mixins/CommentMixin.js b/apps/comments/src/mixins/CommentMixin.js
index e029a4b589a..545625ab97e 100644
--- a/apps/comments/src/mixins/CommentMixin.js
+++ b/apps/comments/src/mixins/CommentMixin.js
@@ -20,9 +20,9 @@
  *
  */
 
-import NewComment from '../services/NewComment'
-import DeleteComment from '../services/DeleteComment'
-import EditComment from '../services/EditComment'
+import NewComment from '../services/NewComment.js'
+import DeleteComment from '../services/DeleteComment.js'
+import EditComment from '../services/EditComment.js'
 import { showError, showUndo, TOAST_UNDO_TIMEOUT } from '@nextcloud/dialogs'
 
 export default {
diff --git a/apps/comments/src/services/CommentsInstance.js b/apps/comments/src/services/CommentsInstance.js
index f5263f35c3d..82f1b77e15e 100644
--- a/apps/comments/src/services/CommentsInstance.js
+++ b/apps/comments/src/services/CommentsInstance.js
@@ -22,7 +22,7 @@
 
 import { getLoggerBuilder } from '@nextcloud/logger'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import CommentsApp from '../views/Comments'
+import CommentsApp from '../views/Comments.vue'
 import Vue from 'vue'
 
 const logger = getLoggerBuilder()
diff --git a/apps/comments/src/services/DavClient.js b/apps/comments/src/services/DavClient.js
index ee5aec129c1..6837ce90c56 100644
--- a/apps/comments/src/services/DavClient.js
+++ b/apps/comments/src/services/DavClient.js
@@ -23,7 +23,7 @@
 import { createClient, getPatcher } from 'webdav'
 import axios from '@nextcloud/axios'
 
-import { getRootPath } from '../utils/davUtils'
+import { getRootPath } from '../utils/davUtils.js'
 
 // Add this so the server knows it is an request from the browser
 axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
diff --git a/apps/comments/src/services/DeleteComment.js b/apps/comments/src/services/DeleteComment.js
index 871f6b6c5b8..43d53129f72 100644
--- a/apps/comments/src/services/DeleteComment.js
+++ b/apps/comments/src/services/DeleteComment.js
@@ -20,7 +20,7 @@
  *
  */
 
-import client from './DavClient'
+import client from './DavClient.js'
 
 /**
  * Delete a comment
diff --git a/apps/comments/src/services/EditComment.js b/apps/comments/src/services/EditComment.js
index f3a2d857356..51d0d4cca65 100644
--- a/apps/comments/src/services/EditComment.js
+++ b/apps/comments/src/services/EditComment.js
@@ -20,7 +20,7 @@
  *
  */
 
-import client from './DavClient'
+import client from './DavClient.js'
 
 /**
  * Edit an existing comment
diff --git a/apps/comments/src/services/GetComments.js b/apps/comments/src/services/GetComments.js
index bf3dd31b5f1..4bdab9046a2 100644
--- a/apps/comments/src/services/GetComments.js
+++ b/apps/comments/src/services/GetComments.js
@@ -20,10 +20,10 @@
  *
  */
 
-import { parseXML, prepareFileFromProps } from 'webdav/dist/node/tools/dav'
-import { processResponsePayload } from 'webdav/dist/node/response'
-import { decodeHtmlEntities } from '../utils/decodeHtmlEntities'
-import client from './DavClient'
+import { parseXML, prepareFileFromProps } from 'webdav/dist/node/tools/dav.js'
+import { processResponsePayload } from 'webdav/dist/node/response.js'
+import { decodeHtmlEntities } from '../utils/decodeHtmlEntities.js'
+import client from './DavClient.js'
 
 export const DEFAULT_LIMIT = 20
 /**
diff --git a/apps/comments/src/services/NewComment.js b/apps/comments/src/services/NewComment.js
index 27d227ed656..a7fb58e32fb 100644
--- a/apps/comments/src/services/NewComment.js
+++ b/apps/comments/src/services/NewComment.js
@@ -21,10 +21,10 @@
  */
 
 import { getCurrentUser } from '@nextcloud/auth'
-import { getRootPath } from '../utils/davUtils'
-import { decodeHtmlEntities } from '../utils/decodeHtmlEntities'
+import { getRootPath } from '../utils/davUtils.js'
+import { decodeHtmlEntities } from '../utils/decodeHtmlEntities.js'
 import axios from '@nextcloud/axios'
-import client from './DavClient'
+import client from './DavClient.js'
 
 /**
  * Retrieve the comments list
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 288fe44e96b..855c9b2d4fa 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -86,11 +86,11 @@ import axios from '@nextcloud/axios'
 import VTooltip from 'v-tooltip'
 import Vue from 'vue'
 
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import RefreshIcon from 'vue-material-design-icons/Refresh'
-import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText'
-import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
+import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
+import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
 
 import Comment from '../components/Comment.vue'
 import getComments, { DEFAULT_LIMIT } from '../services/GetComments.js'
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 8d4785f1b69..4e238a51f6f 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -96,9 +96,9 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Draggable from 'vuedraggable'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Vue from 'vue'
 
diff --git a/apps/dashboard/src/main.js b/apps/dashboard/src/main.js
index dc276959b11..53bff4a27bd 100644
--- a/apps/dashboard/src/main.js
+++ b/apps/dashboard/src/main.js
@@ -23,7 +23,7 @@
 import Vue from 'vue'
 import DashboardApp from './DashboardApp.vue'
 import { translate as t } from '@nextcloud/l10n'
-import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { getRequestToken } from '@nextcloud/auth'
 
 // eslint-disable-next-line camelcase
diff --git a/apps/dav/src/dav/client.js b/apps/dav/src/dav/client.js
index ff858e0492c..b053e585ce8 100644
--- a/apps/dav/src/dav/client.js
+++ b/apps/dav/src/dav/client.js
@@ -1,4 +1,4 @@
-/*
+/**
  * @copyright 2021 Christoph Wurst <christoph@winzerhof-wurst.at>
  *
  * @author 2021 Christoph Wurst <christoph@winzerhof-wurst.at>
@@ -21,7 +21,7 @@
 
 import * as webdav from 'webdav'
 import axios from '@nextcloud/axios'
-import memoize from 'lodash/fp/memoize'
+import memoize from 'lodash/fp/memoize.js'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 
diff --git a/apps/dav/src/service/CalendarService.js b/apps/dav/src/service/CalendarService.js
index 2b416d6b670..9faad92f418 100644
--- a/apps/dav/src/service/CalendarService.js
+++ b/apps/dav/src/service/CalendarService.js
@@ -18,9 +18,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { getClient } from '../dav/client'
-import logger from './logger'
-import { parseXML } from 'webdav/dist/node/tools/dav'
+import { getClient } from '../dav/client.js'
+import logger from './logger.js'
+import { parseXML } from 'webdav/dist/node/tools/dav.js'
 
 import {
 	slotsToVavailability,
diff --git a/apps/dav/src/settings-personal-availability.js b/apps/dav/src/settings-personal-availability.js
index b0d6b19aa8a..8b7bcba0c26 100644
--- a/apps/dav/src/settings-personal-availability.js
+++ b/apps/dav/src/settings-personal-availability.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { translate } from '@nextcloud/l10n'
-import Availability from './views/Availability'
+import Availability from './views/Availability.vue'
 
 Vue.prototype.$t = translate
 
diff --git a/apps/dav/src/settings.js b/apps/dav/src/settings.js
index 6744f22ad23..a99db386d69 100644
--- a/apps/dav/src/settings.js
+++ b/apps/dav/src/settings.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { loadState } from '@nextcloud/initial-state'
 import { translate } from '@nextcloud/l10n'
-import CalDavSettings from './views/CalDavSettings'
+import CalDavSettings from './views/CalDavSettings.vue'
 
 Vue.prototype.$t = translate
 
diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index e0128a59e0a..bdc0c733c98 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/apps/dav/src/views/Availability.vue
@@ -47,15 +47,15 @@ import {
 	findScheduleInboxAvailability,
 	getEmptySlots,
 	saveScheduleInboxAvailability,
-} from '../service/CalendarService'
+} from '../service/CalendarService.js'
 import {
 	enableUserStatusAutomation,
 	disableUserStatusAutomation,
-} from '../service/PreferenceService'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
+} from '../service/PreferenceService.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
 
 export default {
 	name: 'Availability',
diff --git a/apps/dav/src/views/CalDavSettings.spec.js b/apps/dav/src/views/CalDavSettings.spec.js
index 5c81c6259a1..7bc6e2f7b40 100644
--- a/apps/dav/src/views/CalDavSettings.spec.js
+++ b/apps/dav/src/views/CalDavSettings.spec.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/vue'
-import CalDavSettings from './CalDavSettings'
+import CalDavSettings from './CalDavSettings.vue'
 // eslint-disable-next-line no-unused-vars
 import { generateUrl } from '@nextcloud/router'
 
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
index 776f32bff36..6755cbd171d 100644
--- a/apps/dav/src/views/CalDavSettings.vue
+++ b/apps/dav/src/views/CalDavSettings.vue
@@ -75,8 +75,8 @@
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#')
 
diff --git a/apps/federatedfilesharing/src/components/AdminSettings.vue b/apps/federatedfilesharing/src/components/AdminSettings.vue
index 678e47012c2..6fb05d29e8f 100644
--- a/apps/federatedfilesharing/src/components/AdminSettings.vue
+++ b/apps/federatedfilesharing/src/components/AdminSettings.vue
@@ -65,8 +65,8 @@
 </template>
 
 <script>
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index 745c7af9c8d..1d5ea2561c6 100644
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -89,12 +89,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import Twitter from 'vue-material-design-icons/Twitter'
-import Facebook from 'vue-material-design-icons/Facebook'
-import Web from 'vue-material-design-icons/Web'
-import Clipboard from 'vue-material-design-icons/Clipboard'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Twitter from 'vue-material-design-icons/Twitter.vue'
+import Facebook from 'vue-material-design-icons/Facebook.vue'
+import Web from 'vue-material-design-icons/Web.vue'
+import Clipboard from 'vue-material-design-icons/Clipboard.vue'
 
 export default {
 	name: 'PersonalSettings',
diff --git a/apps/federatedfilesharing/src/main-admin.js b/apps/federatedfilesharing/src/main-admin.js
index efe3b52479d..031ebb32c20 100644
--- a/apps/federatedfilesharing/src/main-admin.js
+++ b/apps/federatedfilesharing/src/main-admin.js
@@ -26,7 +26,7 @@ import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
 import { loadState } from '@nextcloud/initial-state'
 
-import AdminSettings from './components/AdminSettings'
+import AdminSettings from './components/AdminSettings.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
diff --git a/apps/federatedfilesharing/src/main-personal.js b/apps/federatedfilesharing/src/main-personal.js
index 13820b4ccd1..ee1836457b3 100644
--- a/apps/federatedfilesharing/src/main-personal.js
+++ b/apps/federatedfilesharing/src/main-personal.js
@@ -22,7 +22,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
 
-import PersonalSettings from './components/PersonalSettings'
+import PersonalSettings from './components/PersonalSettings.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
diff --git a/apps/files/src/components/PersonalSettings.vue b/apps/files/src/components/PersonalSettings.vue
index 1431ae4053a..5f5dc31eafb 100644
--- a/apps/files/src/components/PersonalSettings.vue
+++ b/apps/files/src/components/PersonalSettings.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import TransferOwnershipDialogue from './TransferOwnershipDialogue'
+import TransferOwnershipDialogue from './TransferOwnershipDialogue.vue'
 
 export default {
 	name: 'PersonalSettings',
diff --git a/apps/files/src/components/SidebarTab.vue b/apps/files/src/components/SidebarTab.vue
index ac3cfba7d02..0a6432b47b6 100644
--- a/apps/files/src/components/SidebarTab.vue
+++ b/apps/files/src/components/SidebarTab.vue
@@ -39,8 +39,8 @@
 </template>
 
 <script>
-import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 export default {
 	name: 'SidebarTab',
diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
index ad152af9ea3..832e4d9dda2 100644
--- a/apps/files/src/components/TemplatePreview.vue
+++ b/apps/files/src/components/TemplatePreview.vue
@@ -48,8 +48,8 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { encodeFilePath } from '../utils/fileUtils'
-import { getToken, isPublic } from '../utils/davUtils'
+import { encodeFilePath } from '../utils/fileUtils.js'
+import { getToken, isPublic } from '../utils/davUtils.js'
 
 // preview width generation
 const previewWidth = 256
diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
index 67840b18829..b14f86e8fe2 100644
--- a/apps/files/src/components/TransferOwnershipDialogue.vue
+++ b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -70,11 +70,11 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import Vue from 'vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import logger from '../logger'
+import logger from '../logger.js'
 
 const picker = getFilePickerBuilder(t('files', 'Choose a file or folder to transfer'))
 	.setMultiSelect(false)
diff --git a/apps/files/src/main-personal-settings.js b/apps/files/src/main-personal-settings.js
index 1d1942e85bb..502d8e30f26 100644
--- a/apps/files/src/main-personal-settings.js
+++ b/apps/files/src/main-personal-settings.js
@@ -25,7 +25,7 @@
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
 
-import PersonalSettings from './components/PersonalSettings'
+import PersonalSettings from './components/PersonalSettings.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/apps/files/src/services/Navigation.ts b/apps/files/src/services/Navigation.ts
index e3286c79a88..9efed538825 100644
--- a/apps/files/src/services/Navigation.ts
+++ b/apps/files/src/services/Navigation.ts
@@ -22,7 +22,7 @@
 import type Node from '@nextcloud/files/dist/files/node'
 import isSvg from 'is-svg'
 
-import logger from '../logger'
+import logger from '../logger.js'
 
 export interface Column {
 	/** Unique column ID */
diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
index 58b798ed0e7..3cdb8c4fb0b 100644
--- a/apps/files/src/sidebar.js
+++ b/apps/files/src/sidebar.js
@@ -24,8 +24,8 @@ import Vue from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import SidebarView from './views/Sidebar.vue'
-import Sidebar from './services/Sidebar'
-import Tab from './models/Tab'
+import Sidebar from './services/Sidebar.js'
+import Tab from './models/Tab.js'
 
 Vue.prototype.t = t
 
diff --git a/apps/files/src/templates.js b/apps/files/src/templates.js
index 7f7ebbf2dcc..3a4f0133f94 100644
--- a/apps/files/src/templates.js
+++ b/apps/files/src/templates.js
@@ -25,11 +25,11 @@ import { getLoggerBuilder } from '@nextcloud/logger'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import { getCurrentDirectory } from './utils/davUtils'
+import { getCurrentDirectory } from './utils/davUtils.js'
 import axios from '@nextcloud/axios'
 import Vue from 'vue'
 
-import TemplatePickerView from './views/TemplatePicker'
+import TemplatePickerView from './views/TemplatePicker.vue'
 import { showError } from '@nextcloud/dialogs'
 
 // Set up logger
diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index a7d1c44e719..9a117b70e22 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -83,7 +83,7 @@ import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDia
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Clipboard from 'vue-material-design-icons/Clipboard.vue'
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import Setting from '../components/Setting.vue'
 
 import { emit } from '@nextcloud/event-bus'
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index c97fb304c32..5c3967b1c93 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -89,13 +89,13 @@ import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 
-import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
-import FileInfo from '../services/FileInfo'
-import SidebarTab from '../components/SidebarTab'
-import LegacyView from '../components/LegacyView'
+import FileInfo from '../services/FileInfo.js'
+import SidebarTab from '../components/SidebarTab.vue'
+import LegacyView from '../components/LegacyView.vue'
 
 export default {
 	name: 'Sidebar',
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 33b925aa2ed..79264d56074 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -66,12 +66,12 @@
 <script>
 import { normalize } from 'path'
 import { showError } from '@nextcloud/dialogs'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import { getCurrentDirectory } from '../utils/davUtils'
-import { createFromTemplate, getTemplates } from '../services/Templates'
-import TemplatePreview from '../components/TemplatePreview'
+import { getCurrentDirectory } from '../utils/davUtils.js'
+import { createFromTemplate, getTemplates } from '../services/Templates.js'
+import TemplatePreview from '../components/TemplatePreview.vue'
 
 const border = 2
 const margin = 8
diff --git a/apps/files_sharing/src/additionalScripts.js b/apps/files_sharing/src/additionalScripts.js
index 6cc039a876a..2ed4d86b64d 100644
--- a/apps/files_sharing/src/additionalScripts.js
+++ b/apps/files_sharing/src/additionalScripts.js
@@ -22,8 +22,8 @@
  *
  */
 
-import './share'
-import './sharebreadcrumbview'
+import './share.js'
+import './sharebreadcrumbview.js'
 import './style/sharebreadcrumb.scss'
 import './collaborationresourceshandler.js'
 
diff --git a/apps/files_sharing/src/collaborationresources.js b/apps/files_sharing/src/collaborationresources.js
index 1e6eda02a93..0175993a2f1 100644
--- a/apps/files_sharing/src/collaborationresources.js
+++ b/apps/files_sharing/src/collaborationresources.js
@@ -23,11 +23,11 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import ClickOutside from 'vue-click-outside'
 
-import View from './views/CollaborationView'
+import View from './views/CollaborationView.vue'
 
 Vue.prototype.t = t
 Tooltip.options.defaultHtml = false
diff --git a/apps/files_sharing/src/components/ExternalShareAction.vue b/apps/files_sharing/src/components/ExternalShareAction.vue
index 39caa1260c8..02b9eadd6e9 100644
--- a/apps/files_sharing/src/components/ExternalShareAction.vue
+++ b/apps/files_sharing/src/components/ExternalShareAction.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import Share from '../models/Share'
+import Share from '../models/Share.js'
 
 export default {
 	name: 'ExternalShareAction',
diff --git a/apps/files_sharing/src/components/PersonalSettings.vue b/apps/files_sharing/src/components/PersonalSettings.vue
index 526bee07324..71a439d72b5 100644
--- a/apps/files_sharing/src/components/PersonalSettings.vue
+++ b/apps/files_sharing/src/components/PersonalSettings.vue
@@ -43,7 +43,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 
-import SelectShareFolderDialogue from './SelectShareFolderDialogue'
+import SelectShareFolderDialogue from './SelectShareFolderDialogue.vue'
 
 export default {
 	name: 'PersonalSettings',
diff --git a/apps/files_sharing/src/components/SharePermissionsEditor.vue b/apps/files_sharing/src/components/SharePermissionsEditor.vue
index c5e652b2cda..41aec036baf 100644
--- a/apps/files_sharing/src/components/SharePermissionsEditor.vue
+++ b/apps/files_sharing/src/components/SharePermissionsEditor.vue
@@ -104,11 +104,11 @@
 </template>
 
 <script>
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
 
-import SharesMixin from '../mixins/SharesMixin'
+import SharesMixin from '../mixins/SharesMixin.js'
 import {
 	ATOMIC_PERMISSIONS,
 	BUNDLED_PERMISSIONS,
@@ -116,10 +116,10 @@ import {
 	permissionsSetIsValid,
 	togglePermissions,
 	canTogglePermissions,
-} from '../lib/SharePermissionsToolBox'
+} from '../lib/SharePermissionsToolBox.js'
 
-import Tune from 'vue-material-design-icons/Tune'
-import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
+import Tune from 'vue-material-design-icons/Tune.vue'
+import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 
 export default {
 	name: 'SharePermissionsEditor',
diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 92527a8f14a..f39e55ccc51 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -137,12 +137,12 @@
 </template>
 
 <script>
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
 
 import SharesMixin from '../mixins/SharesMixin.js'
 
diff --git a/apps/files_sharing/src/components/SharingEntryInherited.vue b/apps/files_sharing/src/components/SharingEntryInherited.vue
index dd53f4f637b..eb39597149a 100644
--- a/apps/files_sharing/src/components/SharingEntryInherited.vue
+++ b/apps/files_sharing/src/components/SharingEntryInherited.vue
@@ -48,15 +48,15 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 import { basename } from '@nextcloud/paths'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 
 // eslint-disable-next-line no-unused-vars
-import Share from '../models/Share'
-import SharesMixin from '../mixins/SharesMixin'
-import SharingEntrySimple from '../components/SharingEntrySimple'
+import Share from '../models/Share.js'
+import SharesMixin from '../mixins/SharesMixin.js'
+import SharingEntrySimple from '../components/SharingEntrySimple.vue'
 
 export default {
 	name: 'SharingEntryInherited',
diff --git a/apps/files_sharing/src/components/SharingEntryInternal.vue b/apps/files_sharing/src/components/SharingEntryInternal.vue
index d3b55d4991c..c7c75a6777f 100644
--- a/apps/files_sharing/src/components/SharingEntryInternal.vue
+++ b/apps/files_sharing/src/components/SharingEntryInternal.vue
@@ -22,8 +22,8 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 import { showSuccess } from '@nextcloud/dialogs'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import SharingEntrySimple from './SharingEntrySimple'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import SharingEntrySimple from './SharingEntrySimple.vue'
 
 export default {
 	name: 'SharingEntryInternal',
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 7622efa6fac..e45690ba2a0 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -281,15 +281,15 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index 43a6172fb15..daff947fe80 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 
 export default {
 	name: 'SharingEntrySimple',
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index de6812c9569..fed2ee7b39a 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -52,11 +52,11 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
-import Config from '../services/ConfigService'
-import GeneratePassword from '../utils/GeneratePassword'
-import Share from '../models/Share'
-import ShareRequests from '../mixins/ShareRequests'
-import ShareTypes from '../mixins/ShareTypes'
+import Config from '../services/ConfigService.js'
+import GeneratePassword from '../utils/GeneratePassword.js'
+import Share from '../models/Share.js'
+import ShareRequests from '../mixins/ShareRequests.js'
+import ShareTypes from '../mixins/ShareTypes.js'
 
 export default {
 	name: 'SharingInput',
diff --git a/apps/files_sharing/src/files_sharing.js b/apps/files_sharing/src/files_sharing.js
index 97174542458..0578da7f9c5 100644
--- a/apps/files_sharing/src/files_sharing.js
+++ b/apps/files_sharing/src/files_sharing.js
@@ -21,5 +21,5 @@
  *
  */
 
-import '../js/app'
-import '../js/sharedfilelist'
+import '../js/app.js'
+import '../js/sharedfilelist.js'
diff --git a/apps/files_sharing/src/lib/SharePermissionsToolBox.spec.js b/apps/files_sharing/src/lib/SharePermissionsToolBox.spec.js
index 7ae29c7134a..f66e5e7964b 100644
--- a/apps/files_sharing/src/lib/SharePermissionsToolBox.spec.js
+++ b/apps/files_sharing/src/lib/SharePermissionsToolBox.spec.js
@@ -29,7 +29,7 @@ import {
 	permissionsSetIsValid,
 	togglePermissions,
 	canTogglePermissions,
-} from '../lib/SharePermissionsToolBox'
+} from '../lib/SharePermissionsToolBox.js'
 
 describe('SharePermissionsToolBox', () => {
 	test('Adding permissions', () => {
diff --git a/apps/files_sharing/src/mixins/ShareRequests.js b/apps/files_sharing/src/mixins/ShareRequests.js
index 9eaad8c4161..4218eecc485 100644
--- a/apps/files_sharing/src/mixins/ShareRequests.js
+++ b/apps/files_sharing/src/mixins/ShareRequests.js
@@ -28,7 +28,7 @@ import 'url-search-params-polyfill'
 
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import Share from '../models/Share'
+import Share from '../models/Share.js'
 
 const shareUrl = generateOcsUrl('apps/files_sharing/api/v1/shares')
 
diff --git a/apps/files_sharing/src/personal-settings.js b/apps/files_sharing/src/personal-settings.js
index afc35dc98dc..1142b6e5136 100644
--- a/apps/files_sharing/src/personal-settings.js
+++ b/apps/files_sharing/src/personal-settings.js
@@ -24,7 +24,7 @@
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
 
-import PersonalSettings from './components/PersonalSettings'
+import PersonalSettings from './components/PersonalSettings.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/apps/files_sharing/src/utils/GeneratePassword.js b/apps/files_sharing/src/utils/GeneratePassword.js
index 63cc68983a1..077f385d7d8 100644
--- a/apps/files_sharing/src/utils/GeneratePassword.js
+++ b/apps/files_sharing/src/utils/GeneratePassword.js
@@ -21,7 +21,7 @@
  */
 
 import axios from '@nextcloud/axios'
-import Config from '../services/ConfigService'
+import Config from '../services/ConfigService.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 const config = new Config()
diff --git a/apps/files_sharing/src/views/SharingInherited.vue b/apps/files_sharing/src/views/SharingInherited.vue
index b570b47e257..b61f65ae47a 100644
--- a/apps/files_sharing/src/views/SharingInherited.vue
+++ b/apps/files_sharing/src/views/SharingInherited.vue
@@ -47,12 +47,12 @@
 
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import axios from '@nextcloud/axios'
 
-import Share from '../models/Share'
-import SharingEntryInherited from '../components/SharingEntryInherited'
-import SharingEntrySimple from '../components/SharingEntrySimple'
+import Share from '../models/Share.js'
+import SharingEntryInherited from '../components/SharingEntryInherited.vue'
+import SharingEntrySimple from '../components/SharingEntrySimple.vue'
 
 export default {
 	name: 'SharingInherited',
diff --git a/apps/files_sharing/src/views/SharingLinkList.vue b/apps/files_sharing/src/views/SharingLinkList.vue
index ee7418c00d5..c3f1425cb70 100644
--- a/apps/files_sharing/src/views/SharingLinkList.vue
+++ b/apps/files_sharing/src/views/SharingLinkList.vue
@@ -46,9 +46,9 @@
 
 <script>
 // eslint-disable-next-line no-unused-vars
-import Share from '../models/Share'
-import ShareTypes from '../mixins/ShareTypes'
-import SharingEntryLink from '../components/SharingEntryLink'
+import Share from '../models/Share.js'
+import ShareTypes from '../mixins/ShareTypes.js'
+import SharingEntryLink from '../components/SharingEntryLink.vue'
 
 export default {
 	name: 'SharingLinkList',
diff --git a/apps/files_sharing/src/views/SharingList.vue b/apps/files_sharing/src/views/SharingList.vue
index 0635ad27635..05dc87d9b07 100644
--- a/apps/files_sharing/src/views/SharingList.vue
+++ b/apps/files_sharing/src/views/SharingList.vue
@@ -33,9 +33,9 @@
 
 <script>
 // eslint-disable-next-line no-unused-vars
-import Share from '../models/Share'
-import SharingEntry from '../components/SharingEntry'
-import ShareTypes from '../mixins/ShareTypes'
+import Share from '../models/Share.js'
+import SharingEntry from '../components/SharingEntry.vue'
+import ShareTypes from '../mixins/ShareTypes.js'
 
 export default {
 	name: 'SharingList',
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index ea25149b97e..bfaf8a766ee 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -87,21 +87,21 @@
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
 import { generateOcsUrl } from '@nextcloud/router'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 
-import Config from '../services/ConfigService'
-import { shareWithTitle } from '../utils/SharedWithMe'
-import Share from '../models/Share'
-import ShareTypes from '../mixins/ShareTypes'
-import SharingEntryInternal from '../components/SharingEntryInternal'
-import SharingEntrySimple from '../components/SharingEntrySimple'
-import SharingInput from '../components/SharingInput'
-
-import SharingInherited from './SharingInherited'
-import SharingLinkList from './SharingLinkList'
-import SharingList from './SharingList'
+import Config from '../services/ConfigService.js'
+import { shareWithTitle } from '../utils/SharedWithMe.js'
+import Share from '../models/Share.js'
+import ShareTypes from '../mixins/ShareTypes.js'
+import SharingEntryInternal from '../components/SharingEntryInternal.vue'
+import SharingEntrySimple from '../components/SharingEntrySimple.vue'
+import SharingInput from '../components/SharingInput.vue'
+
+import SharingInherited from './SharingInherited.vue'
+import SharingLinkList from './SharingLinkList.vue'
+import SharingList from './SharingList.vue'
 
 export default {
 	name: 'SharingTab',
diff --git a/apps/files_trashbin/src/files_trashbin.js b/apps/files_trashbin/src/files_trashbin.js
index 84829341b31..f66e78905f6 100644
--- a/apps/files_trashbin/src/files_trashbin.js
+++ b/apps/files_trashbin/src/files_trashbin.js
@@ -20,8 +20,8 @@
  *
  */
 
-import './app'
-import './filelist'
+import './app.js'
+import './filelist.js'
 import './trash.scss'
 
 window.OCA.Trashbin = OCA.Trashbin
diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 8f7cbd7ad50..51ef3ef61a0 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -111,7 +111,7 @@ import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
-import Delete from 'vue-material-design-icons/Delete'
+import Delete from 'vue-material-design-icons/Delete.vue'
 import { NcActionButton, NcActionLink, NcListItem, NcModal, NcButton, NcTextField, Tooltip } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import { translate } from '@nextcloud/l10n'
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index 28b1f9182e2..fc154204c8d 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -63,11 +63,11 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import OAuthItem from './components/OAuthItem'
+import OAuthItem from './components/OAuthItem.vue'
 import { generateUrl } from '@nextcloud/router'
 import { getCapabilities } from '@nextcloud/capabilities'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 41874b1f02b..a759af56906 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -56,8 +56,8 @@
 
 <script>
 
-import Delete from 'vue-material-design-icons/Delete'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'OAuthItem',
diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
index e61b0cb74bb..f3defc88207 100644
--- a/apps/settings/src/components/AdminDelegating.vue
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import GroupSelect from './AdminDelegation/GroupSelect'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import GroupSelect from './AdminDelegation/GroupSelect.vue'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
index f59a41d86e6..82b5e51fb45 100644
--- a/apps/settings/src/components/AdminDelegation/GroupSelect.vue
+++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
@@ -14,7 +14,7 @@ import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
-import logger from '../../logger'
+import logger from '../../logger.js'
 
 export default {
 	name: 'GroupSelect',
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index 950b857b07a..5be6eaaf512 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -65,10 +65,10 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { loadState } from '@nextcloud/initial-state'
 
 import _ from 'lodash'
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue
index f4cae83f167..0a963f1b636 100644
--- a/apps/settings/src/components/AppDetails.vue
+++ b/apps/settings/src/components/AppDetails.vue
@@ -146,11 +146,11 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
-import AppManagement from '../mixins/AppManagement'
-import PrefixMixin from './PrefixMixin'
-import Markdown from './Markdown'
+import AppManagement from '../mixins/AppManagement.js'
+import PrefixMixin from './PrefixMixin.vue'
+import Markdown from './Markdown.vue'
 
 export default {
 	name: 'AppDetails',
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index bb7c932613e..234fde088e1 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -104,10 +104,10 @@
 </template>
 
 <script>
-import AppItem from './AppList/AppItem'
-import PrefixMixin from './PrefixMixin'
+import AppItem from './AppList/AppItem.vue'
+import PrefixMixin from './PrefixMixin.vue'
 import pLimit from 'p-limit'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'AppList',
diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/components/AuthTokenList.vue
index 491b672d59a..d00e0847fb8 100644
--- a/apps/settings/src/components/AuthTokenList.vue
+++ b/apps/settings/src/components/AuthTokenList.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import AuthToken from './AuthToken'
+import AuthToken from './AuthToken.vue'
 
 export default {
 	name: 'AuthTokenList',
diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/components/AuthTokenSection.vue
index 36eb35fcf48..01a85f4ae1b 100644
--- a/apps/settings/src/components/AuthTokenSection.vue
+++ b/apps/settings/src/components/AuthTokenSection.vue
@@ -40,8 +40,8 @@ import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 import { generateUrl } from '@nextcloud/router'
 
-import AuthTokenList from './AuthTokenList'
-import AuthTokenSetupDialogue from './AuthTokenSetupDialogue'
+import AuthTokenList from './AuthTokenList.vue'
+import AuthTokenSetupDialogue from './AuthTokenSetupDialogue.vue'
 
 const confirm = () => {
 	return new Promise(resolve => {
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 4c92d318b6e..63836290535 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -86,7 +86,7 @@ import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 import { showError } from '@nextcloud/dialogs'
 import { getRootUrl } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import Check from 'vue-material-design-icons/Check.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
index 0519e60a30b..8b63940e257 100644
--- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue
+++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
@@ -43,11 +43,11 @@
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 
-import { saveProfileDefault } from '../../service/ProfileService'
-import { validateBoolean } from '../../utils/validate'
-import logger from '../../logger'
+import { saveProfileDefault } from '../../service/ProfileService.js'
+import { validateBoolean } from '../../utils/validate.js'
+import logger from '../../logger.js'
 
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault', true)
 
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index cec060b32d8..db7a7907761 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -77,9 +77,9 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { loadState } from '@nextcloud/initial-state'
 import { getLoggerBuilder } from '@nextcloud/logger'
 
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index 12bdcedcd8f..639811d1e39 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -53,10 +53,10 @@
 </template>
 
 <script>
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 
 export default {
 	name: 'GroupListItem',
diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
index ce3c80d4820..0ca6c52bacf 100644
--- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue
+++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
@@ -99,15 +99,15 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import VueCropper from 'vue-cropperjs'
 // eslint-disable-next-line node/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
 
-import Upload from 'vue-material-design-icons/Upload'
-import Folder from 'vue-material-design-icons/Folder'
-import Delete from 'vue-material-design-icons/Delete'
+import Upload from 'vue-material-design-icons/Upload.vue'
+import Folder from 'vue-material-design-icons/Folder.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 
 import HeaderBar from './shared/HeaderBar.vue'
 import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
@@ -162,6 +162,12 @@ export default {
 		}
 	},
 
+	computed: {
+		inputId() {
+			return `account-property-${this.avatar.name}`
+		},
+	},
+
 	created() {
 		subscribe('settings:display-name:updated', this.handleDisplayNameUpdate)
 	},
@@ -170,12 +176,6 @@ export default {
 		unsubscribe('settings:display-name:updated', this.handleDisplayNameUpdate)
 	},
 
-	computed: {
-		inputId() {
-			return `account-property-${this.avatar.name}`
-		},
-	},
-
 	methods: {
 		activateLocalFilePicker() {
 			// Set to null so that selecting the same file will trigger the change event
diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
index 7d11e50d3bc..ebfbe51d654 100644
--- a/apps/settings/src/components/PersonalInfo/DetailsSection.vue
+++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
@@ -47,10 +47,10 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 
-import Account from 'vue-material-design-icons/Account'
-import CircleSlice from 'vue-material-design-icons/CircleSlice3'
+import Account from 'vue-material-design-icons/Account.vue'
+import CircleSlice from 'vue-material-design-icons/CircleSlice3.vue'
 
 import HeaderBar from './shared/HeaderBar.vue'
 
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index c6c4376fa10..ca83be9aafe 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -89,7 +89,7 @@
 import { NcActions, NcActionButton } from '@nextcloud/vue'
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import AlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
-import Check from 'vue-material-design-icons/Check'
+import Check from 'vue-material-design-icons/Check.vue'
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
index 025938c4149..f5eb6f13320 100644
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
+++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue
@@ -60,7 +60,7 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import Web from 'vue-material-design-icons/Web'
+import Web from 'vue-material-design-icons/Web.vue'
 
 import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
 import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
index 61a7bfc908d..0732486ea44 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import ChevronDownIcon from 'vue-material-design-icons/ChevronDown'
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
 
 export default {
 	name: 'EditProfileAnchorLink',
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index 522794a832d..8016fe9e459 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -44,7 +44,7 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 	name: 'ProfilePreviewCard',
diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
index c80d1a36658..7ab5619ab87 100644
--- a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
@@ -74,8 +74,8 @@ import debounce from 'debounce'
 import { showError } from '@nextcloud/dialogs'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
-import AlertOctagon from 'vue-material-design-icons/AlertOctagon'
-import Check from 'vue-material-design-icons/Check'
+import AlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 
 import HeaderBar from '../shared/HeaderBar.vue'
 
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index ae1392fe580..11a6beef534 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
index 850a9fa42f2..ad58ff282eb 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
 	name: 'FederationControlAction',
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 541b46fb591..0e42005861c 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -49,8 +49,8 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import Plus from 'vue-material-design-icons/Plus'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
 
 import FederationControl from './FederationControl.vue'
 
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 9d737206bf4..6aa61ccf8da 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -237,11 +237,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
-import userRow from './UserList/UserRow'
+import userRow from './UserList/UserRow.vue'
 
 const unlimitedQuota = {
 	id: 'none',
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 797156f1882..f840b8cdf77 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -244,8 +244,8 @@ import {
 	NcActions,
 	NcActionButton,
 } from '@nextcloud/vue'
-import UserRowSimple from './UserRowSimple'
-import UserRowMixin from '../../mixins/UserRowMixin'
+import UserRowSimple from './UserRowSimple.vue'
+import UserRowMixin from '../../mixins/UserRowMixin.js'
 
 export default {
 	name: 'UserRow',
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
index eddc16a64a5..8f5e3ae8e84 100644
--- a/apps/settings/src/components/UserList/UserRowSimple.vue
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -83,12 +83,12 @@
 </template>
 
 <script>
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import ClickOutside from 'vue-click-outside'
 import { getCurrentUser } from '@nextcloud/auth'
-import UserRowMixin from '../../mixins/UserRowMixin'
+import UserRowMixin from '../../mixins/UserRowMixin.js'
 export default {
 	name: 'UserRowSimple',
 	components: {
diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue
index 3fec2d84351..947bc662418 100644
--- a/apps/settings/src/components/WebAuthn/AddDevice.vue
+++ b/apps/settings/src/components/WebAuthn/AddDevice.vue
@@ -64,11 +64,11 @@
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 
-import logger from '../../logger'
+import logger from '../../logger.js'
 import {
 	startRegistration,
 	finishRegistration,
-} from '../../service/WebAuthnRegistrationSerice'
+} from '../../service/WebAuthnRegistrationSerice.js'
 
 const logAndPass = (text) => (data) => {
 	logger.debug(text)
diff --git a/apps/settings/src/components/WebAuthn/Device.vue b/apps/settings/src/components/WebAuthn/Device.vue
index d5a0623ab68..1de2661b8dc 100644
--- a/apps/settings/src/components/WebAuthn/Device.vue
+++ b/apps/settings/src/components/WebAuthn/Device.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
 	name: 'Device',
diff --git a/apps/settings/src/components/WebAuthn/Section.vue b/apps/settings/src/components/WebAuthn/Section.vue
index db6cc1dafc3..9172a8ca080 100644
--- a/apps/settings/src/components/WebAuthn/Section.vue
+++ b/apps/settings/src/components/WebAuthn/Section.vue
@@ -50,12 +50,12 @@
 <script>
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
-import sortBy from 'lodash/fp/sortBy'
+import sortBy from 'lodash/fp/sortBy.js'
 
-import AddDevice from './AddDevice'
-import Device from './Device'
-import logger from '../../logger'
-import { removeRegistration } from '../../service/WebAuthnRegistrationSerice'
+import AddDevice from './AddDevice.vue'
+import Device from './Device.vue'
+import logger from '../../logger.js'
+import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js'
 
 const sortByName = sortBy('name')
 
diff --git a/apps/settings/src/main-admin-basic-settings.js b/apps/settings/src/main-admin-basic-settings.js
index 5ccf7da4676..46393ae4b8f 100644
--- a/apps/settings/src/main-admin-basic-settings.js
+++ b/apps/settings/src/main-admin-basic-settings.js
@@ -26,10 +26,10 @@ import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
 
-import logger from './logger'
+import logger from './logger.js'
 
-import ProfileSettings from './components/BasicSettings/ProfileSettings'
-import BackgroundJob from './components/BasicSettings/BackgroundJob'
+import ProfileSettings from './components/BasicSettings/ProfileSettings.vue'
+import BackgroundJob from './components/BasicSettings/BackgroundJob.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
diff --git a/apps/settings/src/main-admin-security.js b/apps/settings/src/main-admin-security.js
index bd586189743..f3279f45c93 100644
--- a/apps/settings/src/main-admin-security.js
+++ b/apps/settings/src/main-admin-security.js
@@ -27,7 +27,7 @@ import Vue from 'vue'
 
 import AdminTwoFactor from './components/AdminTwoFactor.vue'
 import Encryption from './components/Encryption.vue'
-import store from './store/admin-security'
+import store from './store/admin-security.js'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(OC.requestToken)
diff --git a/apps/settings/src/main-apps-users-management.js b/apps/settings/src/main-apps-users-management.js
index 59b7aa3c5b7..f81670fa624 100644
--- a/apps/settings/src/main-apps-users-management.js
+++ b/apps/settings/src/main-apps-users-management.js
@@ -27,8 +27,8 @@ import VTooltip from 'v-tooltip'
 import { sync } from 'vuex-router-sync'
 
 import App from './App.vue'
-import router from './router'
-import store from './store'
+import router from './router.js'
+import store from './store/index.js'
 
 Vue.use(VTooltip, { defaultHtml: false })
 
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
index 31e798d5646..634deca61b5 100644
--- a/apps/settings/src/main-personal-security.js
+++ b/apps/settings/src/main-personal-security.js
@@ -25,7 +25,7 @@ import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 
-import AuthTokenSection from './components/AuthTokenSection'
+import AuthTokenSection from './components/AuthTokenSection.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(OC.requestToken)
diff --git a/apps/settings/src/main-personal-webauth.js b/apps/settings/src/main-personal-webauth.js
index 650130573c9..dc11ecdbba2 100644
--- a/apps/settings/src/main-personal-webauth.js
+++ b/apps/settings/src/main-personal-webauth.js
@@ -23,7 +23,7 @@
 import Vue from 'vue'
 import { loadState } from '@nextcloud/initial-state'
 
-import WebAuthnSection from './components/WebAuthn/Section'
+import WebAuthnSection from './components/WebAuthn/Section.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(OC.requestToken)
diff --git a/apps/settings/src/router.js b/apps/settings/src/router.js
index cf842475c5d..977cab2de96 100644
--- a/apps/settings/src/router.js
+++ b/apps/settings/src/router.js
@@ -30,8 +30,8 @@ import store from './store/index.js'
 import { setPageHeading } from '../../../core/src/OCP/accessibility.js'
 
 // Dynamic loading
-const Users = () => import(/* webpackChunkName: 'settings-users' */'./views/Users')
-const Apps = () => import(/* webpackChunkName: 'settings-apps-view' */'./views/Apps')
+const Users = () => import(/* webpackChunkName: 'settings-users' */'./views/Users.vue')
+const Apps = () => import(/* webpackChunkName: 'settings-apps-view' */'./views/Apps.vue')
 
 Vue.use(Router)
 
diff --git a/apps/settings/src/service/PersonalInfo/EmailService.js b/apps/settings/src/service/PersonalInfo/EmailService.js
index 90301715521..535bd6a2295 100644
--- a/apps/settings/src/service/PersonalInfo/EmailService.js
+++ b/apps/settings/src/service/PersonalInfo/EmailService.js
@@ -26,7 +26,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 
-import { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.js'
 
 /**
  * Save the primary email of the user
diff --git a/apps/settings/src/service/PersonalInfo/PersonalInfoService.js b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js
index f39d29011ba..2e386a98bec 100644
--- a/apps/settings/src/service/PersonalInfo/PersonalInfoService.js
+++ b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js
@@ -26,7 +26,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 
-import { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants'
+import { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.js'
 
 /**
  * Save the primary account property value for the user
diff --git a/apps/settings/src/store/apps.js b/apps/settings/src/store/apps.js
index 29009fc65e0..6e23a012237 100644
--- a/apps/settings/src/store/apps.js
+++ b/apps/settings/src/store/apps.js
@@ -22,7 +22,7 @@
  *
  */
 
-import api from './api'
+import api from './api.js'
 import Vue from 'vue'
 import { generateUrl } from '@nextcloud/router'
 import { showError, showInfo } from '@nextcloud/dialogs'
diff --git a/apps/settings/src/store/index.js b/apps/settings/src/store/index.js
index 6689e4e5546..abb1f374691 100644
--- a/apps/settings/src/store/index.js
+++ b/apps/settings/src/store/index.js
@@ -23,10 +23,10 @@
 
 import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
-import users from './users'
-import apps from './apps'
-import settings from './settings'
-import oc from './oc'
+import users from './users.js'
+import apps from './apps.js'
+import settings from './settings.js'
+import oc from './oc.js'
 import { showError } from '@nextcloud/dialogs'
 
 Vue.use(Vuex)
diff --git a/apps/settings/src/store/oc.js b/apps/settings/src/store/oc.js
index d2197701aec..1b8d6c98cad 100644
--- a/apps/settings/src/store/oc.js
+++ b/apps/settings/src/store/oc.js
@@ -21,7 +21,7 @@
  *
  */
 
-import api from './api'
+import api from './api.js'
 import { generateOcsUrl } from '@nextcloud/router'
 
 const state = {}
diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js
index e89e5e968da..f1941aa6704 100644
--- a/apps/settings/src/store/users.js
+++ b/apps/settings/src/store/users.js
@@ -26,10 +26,10 @@
  *
  */
 
-import api from './api'
+import api from './api.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import logger from '../logger'
+import logger from '../logger.js'
 
 const orderGroups = function(groups, orderBy) {
 	/* const SORT_USERCOUNT = 1;
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 1ba74c08ac5..f9f1023f928 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -139,20 +139,20 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer'
-import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
-import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
-import NcContent from '@nextcloud/vue/dist/Components/NcContent'
-
-import AppList from '../components/AppList'
-import AppDetails from '../components/AppDetails'
-import AppManagement from '../mixins/AppManagement'
-import AppScore from '../components/AppList/AppScore'
-import Markdown from '../components/Markdown'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer.js'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+
+import AppList from '../components/AppList.vue'
+import AppDetails from '../components/AppDetails.vue'
+import AppManagement from '../mixins/AppManagement.js'
+import AppScore from '../components/AppList/AppScore.vue'
+import Markdown from '../components/Markdown.vue'
 
 import { APPS_SECTION_ENUM } from './../constants/AppsConstants.js'
 
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index ce3ce235c31..dbff4f552a6 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -142,22 +142,22 @@
 </template>
 
 <script>
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
-import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
-import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
 import axios from '@nextcloud/axios'
-import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import { generateUrl } from '@nextcloud/router'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
-import GroupListItem from '../components/GroupListItem'
-import UserList from '../components/UserList'
+import GroupListItem from '../components/GroupListItem.vue'
+import UserList from '../components/UserList.vue'
 
 Vue.use(VueLocalStorage)
 
diff --git a/apps/sharebymail/src/components/AdminSettings.vue b/apps/sharebymail/src/components/AdminSettings.vue
index 8a681110216..e42147e0d99 100644
--- a/apps/sharebymail/src/components/AdminSettings.vue
+++ b/apps/sharebymail/src/components/AdminSettings.vue
@@ -38,8 +38,8 @@
 </template>
 
 <script>
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
diff --git a/apps/sharebymail/src/main-admin.js b/apps/sharebymail/src/main-admin.js
index ca7af473fa6..026128b2f21 100644
--- a/apps/sharebymail/src/main-admin.js
+++ b/apps/sharebymail/src/main-admin.js
@@ -25,7 +25,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
 
-import AdminSettings from './components/AdminSettings'
+import AdminSettings from './components/AdminSettings.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
diff --git a/apps/systemtags/src/systemtags.js b/apps/systemtags/src/systemtags.js
index bde632fb142..a96d78a5dea 100644
--- a/apps/systemtags/src/systemtags.js
+++ b/apps/systemtags/src/systemtags.js
@@ -21,10 +21,10 @@
  *
  */
 
-import './app'
-import './systemtagsfilelist'
-import './filesplugin'
-import './systemtagsinfoview'
+import './app.js'
+import './systemtagsfilelist.js'
+import './filesplugin.js'
+import './systemtagsinfoview.js'
 import './css/systemtagsfilelist.scss'
 
 window.OCA.SystemTags = OCA.SystemTags
diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 0f72e95d9a8..bb040358bb2 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -80,8 +80,8 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import BackgroundSettings from './components/BackgroundSettings.vue'
 import ItemPreview from './components/ItemPreview.vue'
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index b550eca05cf..6a34eb19ac5 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -97,9 +97,9 @@ import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import ImageEdit from 'vue-material-design-icons/ImageEdit.vue'
 import debounce from 'debounce'
-import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
+import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import Vibrant from 'node-vibrant'
-import { Palette } from 'node-vibrant/lib/color'
+import { Palette } from 'node-vibrant/lib/color.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 
diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 015a7480c72..0fb20028b53 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -20,7 +20,7 @@
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 export default {
 	name: 'ItemPreview',
diff --git a/apps/twofactor_backupcodes/src/settings.js b/apps/twofactor_backupcodes/src/settings.js
index 30f80c2fbeb..b492fafefb5 100644
--- a/apps/twofactor_backupcodes/src/settings.js
+++ b/apps/twofactor_backupcodes/src/settings.js
@@ -25,8 +25,8 @@
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
 
-import PersonalSettings from './views/PersonalSettings'
-import store from './store'
+import PersonalSettings from './views/PersonalSettings.vue'
+import store from './store.js'
 
 Vue.prototype.t = t
 
diff --git a/apps/twofactor_backupcodes/src/store.js b/apps/twofactor_backupcodes/src/store.js
index bac11bf82f2..b625c200fda 100644
--- a/apps/twofactor_backupcodes/src/store.js
+++ b/apps/twofactor_backupcodes/src/store.js
@@ -23,7 +23,7 @@
 
 import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
-import { generateCodes } from './service/BackupCodesService'
+import { generateCodes } from './service/BackupCodesService.js'
 
 Vue.use(Vuex)
 
diff --git a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
index d72b5392557..1703bd2aafd 100644
--- a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
+++ b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
@@ -46,7 +46,7 @@
 <script>
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
-import { print } from '../service/PrintService'
+import { print } from '../service/PrintService.js'
 
 export default {
 	name: 'PersonalSettings',
diff --git a/apps/updatenotification/src/init.js b/apps/updatenotification/src/init.js
index 4aada5aba43..dc25ca363b4 100644
--- a/apps/updatenotification/src/init.js
+++ b/apps/updatenotification/src/init.js
@@ -22,7 +22,7 @@
  */
 
 import Vue from 'vue'
-import Root from './components/UpdateNotification'
+import Root from './components/UpdateNotification.vue'
 
 Vue.mixin({
 	methods: {
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 28c0896fee5..3c8cc151e76 100644
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -61,8 +61,8 @@ import { loadState } from '@nextcloud/initial-state'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import debounce from 'debounce'
 
-import { sendHeartbeat } from './services/heartbeatService'
-import OnlineStatusMixin from './mixins/OnlineStatusMixin'
+import { sendHeartbeat } from './services/heartbeatService.js'
+import OnlineStatusMixin from './mixins/OnlineStatusMixin.js'
 
 const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
 
@@ -70,7 +70,7 @@ export default {
 	name: 'UserStatus',
 
 	components: {
-		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal'),
+		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
 	},
 	mixins: [OnlineStatusMixin],
 
diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue
index bca94b41a76..b1a16d6fa59 100644
--- a/apps/user_status/src/components/PredefinedStatus.vue
+++ b/apps/user_status/src/components/PredefinedStatus.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { clearAtFilter } from '../filters/clearAtFilter'
+import { clearAtFilter } from '../filters/clearAtFilter.js'
 
 export default {
 	name: 'PredefinedStatus',
diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue
index cff03289715..6d62eee8b0c 100644
--- a/apps/user_status/src/components/PredefinedStatusesList.vue
+++ b/apps/user_status/src/components/PredefinedStatusesList.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import PredefinedStatus from './PredefinedStatus'
+import PredefinedStatus from './PredefinedStatus.vue'
 import { mapState } from 'vuex'
 
 export default {
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index d7adc99da14..c3f0a793df3 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -73,8 +73,8 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { getAllStatusOptions } from '../services/statusOptionsService.js'
 import OnlineStatusMixin from '../mixins/OnlineStatusMixin.js'
 import PredefinedStatusesList from './PredefinedStatusesList.vue'
diff --git a/apps/user_status/src/dashboard.js b/apps/user_status/src/dashboard.js
index 9c3d94151d0..4554dcba1b0 100644
--- a/apps/user_status/src/dashboard.js
+++ b/apps/user_status/src/dashboard.js
@@ -23,7 +23,7 @@
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Dashboard from './views/Dashboard'
+import Dashboard from './views/Dashboard.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/apps/user_status/src/filters/clearAtFilter.js b/apps/user_status/src/filters/clearAtFilter.js
index 9a99b9ec69f..b92a87fbf61 100644
--- a/apps/user_status/src/filters/clearAtFilter.js
+++ b/apps/user_status/src/filters/clearAtFilter.js
@@ -22,7 +22,7 @@
 
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { dateFactory } from '../services/dateService'
+import { dateFactory } from '../services/dateService.js'
 
 /**
  * Formats a clearAt object to be human readable
diff --git a/apps/user_status/src/services/clearAtService.js b/apps/user_status/src/services/clearAtService.js
index a02905b90c9..2d527db0932 100644
--- a/apps/user_status/src/services/clearAtService.js
+++ b/apps/user_status/src/services/clearAtService.js
@@ -22,7 +22,7 @@
 
 import {
 	dateFactory,
-} from './dateService'
+} from './dateService.js'
 import moment from '@nextcloud/moment'
 
 /**
diff --git a/apps/user_status/src/store/index.js b/apps/user_status/src/store/index.js
index c2c270d14d8..caf4eb5f072 100644
--- a/apps/user_status/src/store/index.js
+++ b/apps/user_status/src/store/index.js
@@ -22,8 +22,8 @@
 
 import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
-import predefinedStatuses from './predefinedStatuses'
-import userStatus from './userStatus'
+import predefinedStatuses from './predefinedStatuses.js'
+import userStatus from './userStatus.js'
 
 Vue.use(Vuex)
 
diff --git a/apps/user_status/src/store/predefinedStatuses.js b/apps/user_status/src/store/predefinedStatuses.js
index e41ba24f7dd..05d18b51771 100644
--- a/apps/user_status/src/store/predefinedStatuses.js
+++ b/apps/user_status/src/store/predefinedStatuses.js
@@ -20,7 +20,7 @@
  *
  */
 
-import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService'
+import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
 
 const state = {
 	predefinedStatuses: [],
diff --git a/apps/user_status/src/store/userStatus.js b/apps/user_status/src/store/userStatus.js
index 6d8b5bd1e1f..92bc4986c52 100644
--- a/apps/user_status/src/store/userStatus.js
+++ b/apps/user_status/src/store/userStatus.js
@@ -26,10 +26,10 @@ import {
 	setPredefinedMessage,
 	setCustomMessage,
 	clearMessage,
-} from '../services/statusService'
+} from '../services/statusService.js'
 import { loadState } from '@nextcloud/initial-state'
 import { getCurrentUser } from '@nextcloud/auth'
-import { getTimestampForClearAt } from '../services/clearAtService'
+import { getTimestampForClearAt } from '../services/clearAtService.js'
 import { emit } from '@nextcloud/event-bus'
 
 const state = {
diff --git a/apps/user_status/src/views/Dashboard.vue b/apps/user_status/src/views/Dashboard.vue
index ef5a9832ebc..1f9201cd118 100644
--- a/apps/user_status/src/views/Dashboard.vue
+++ b/apps/user_status/src/views/Dashboard.vue
@@ -45,9 +45,9 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget'
-import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
+import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem.js'
 import moment from '@nextcloud/moment'
 
 export default {
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index e287df4f914..910284bdb2d 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -75,13 +75,13 @@
 import { showError } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { getLocale } from '@nextcloud/l10n'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import * as network from './services/weatherStatusService'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import * as network from './services/weatherStatusService.js'
 
 const MODE_BROWSER_LOCATION = 1
 const MODE_MANUAL_LOCATION = 2
diff --git a/apps/weather_status/src/weather-status.js b/apps/weather_status/src/weather-status.js
index 4450e70940e..576767b7d72 100644
--- a/apps/weather_status/src/weather-status.js
+++ b/apps/weather_status/src/weather-status.js
@@ -22,7 +22,7 @@
 
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
-import App from './App'
+import App from './App.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 459c97a0d05..427835a7ec7 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -41,9 +41,9 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import ClickOutside from 'vue-click-outside'
 
 export default {
diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index 86f1a6b8cb1..8798a080b21 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -56,8 +56,8 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import valueMixin from './../../mixins/valueMixin'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import valueMixin from './../../mixins/valueMixin.js'
 import { imagePath } from '@nextcloud/router'
 
 export default {
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue
index d8bfaff63a5..79a91c0e544 100644
--- a/apps/workflowengine/src/components/Checks/RequestTime.vue
+++ b/apps/workflowengine/src/components/Checks/RequestTime.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import moment from 'moment-timezone'
-import valueMixin from '../../mixins/valueMixin'
+import valueMixin from '../../mixins/valueMixin.js'
 
 const zones = moment.tz.names()
 export default {
diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue
index 1a5b5cc7f87..28184a52eb5 100644
--- a/apps/workflowengine/src/components/Checks/RequestURL.vue
+++ b/apps/workflowengine/src/components/Checks/RequestURL.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import valueMixin from '../../mixins/valueMixin'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import valueMixin from '../../mixins/valueMixin.js'
 
 export default {
 	name: 'RequestURL',
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index c4a5265ac99..1d00bdc238d 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -52,8 +52,8 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import valueMixin from '../../mixins/valueMixin'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import valueMixin from '../../mixins/valueMixin.js'
 
 export default {
 	name: 'RequestUserAgent',
diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
index ba55d88c81c..cfb9c7dcc98 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 
diff --git a/apps/workflowengine/src/components/Checks/file.js b/apps/workflowengine/src/components/Checks/file.js
index b244199c2cc..627eb393706 100644
--- a/apps/workflowengine/src/components/Checks/file.js
+++ b/apps/workflowengine/src/components/Checks/file.js
@@ -21,9 +21,9 @@
  *
  */
 
-import { stringValidator, validateIPv4, validateIPv6 } from '../../helpers/validators'
-import FileMimeType from './FileMimeType'
-import FileSystemTag from './FileSystemTag'
+import { stringValidator, validateIPv4, validateIPv6 } from '../../helpers/validators.js'
+import FileMimeType from './FileMimeType.vue'
+import FileSystemTag from './FileSystemTag.vue'
 
 const stringOrRegexOperators = () => {
 	return [
diff --git a/apps/workflowengine/src/components/Checks/index.js b/apps/workflowengine/src/components/Checks/index.js
index 11db7fafa9c..e342b3571c7 100644
--- a/apps/workflowengine/src/components/Checks/index.js
+++ b/apps/workflowengine/src/components/Checks/index.js
@@ -20,7 +20,7 @@
  *
  */
 
-import FileChecks from './file'
-import RequestChecks from './request'
+import FileChecks from './file.js'
+import RequestChecks from './request.js'
 
 export default [...FileChecks, ...RequestChecks]
diff --git a/apps/workflowengine/src/components/Checks/request.js b/apps/workflowengine/src/components/Checks/request.js
index c5ed0ece439..9f33bac6676 100644
--- a/apps/workflowengine/src/components/Checks/request.js
+++ b/apps/workflowengine/src/components/Checks/request.js
@@ -20,10 +20,10 @@
  *
  */
 
-import RequestUserAgent from './RequestUserAgent'
-import RequestTime from './RequestTime'
-import RequestURL from './RequestURL'
-import RequestUserGroup from './RequestUserGroup'
+import RequestUserAgent from './RequestUserAgent.vue'
+import RequestTime from './RequestTime.vue'
+import RequestURL from './RequestURL.vue'
+import RequestUserGroup from './RequestUserGroup.vue'
 
 const RequestChecks = [
 	{
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index be0030095e1..b2a68c16dbd 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { showWarning } from '@nextcloud/dialogs'
 
 export default {
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 64875605b0b..7f338b20172 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'Operation',
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 4c5162da926..6b0abed88c8 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -53,17 +53,17 @@
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import CheckMark from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 
-import Event from './Event'
-import Check from './Check'
-import Operation from './Operation'
+import Event from './Event.vue'
+import Check from './Check.vue'
+import Operation from './Operation.vue'
 
 export default {
 	name: 'Rule',
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index bc33d03014d..937d89763dc 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -49,15 +49,15 @@
 </template>
 
 <script>
-import Rule from './Rule'
-import Operation from './Operation'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import Rule from './Rule.vue'
+import Operation from './Operation.vue'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { mapGetters, mapState } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import MenuUp from 'vue-material-design-icons/MenuUp'
-import MenuDown from 'vue-material-design-icons/MenuDown'
+import MenuUp from 'vue-material-design-icons/MenuUp.vue'
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 
 const ACTION_LIMIT = 3
 
diff --git a/apps/workflowengine/src/store.js b/apps/workflowengine/src/store.js
index 1de22622c5a..49c881e67b6 100644
--- a/apps/workflowengine/src/store.js
+++ b/apps/workflowengine/src/store.js
@@ -27,7 +27,7 @@
 import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
 import axios from '@nextcloud/axios'
-import { getApiUrl } from './helpers/api'
+import { getApiUrl } from './helpers/api.js'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import '@nextcloud/password-confirmation/dist/style.css'
 import { loadState } from '@nextcloud/initial-state'
diff --git a/apps/workflowengine/src/workflowengine.js b/apps/workflowengine/src/workflowengine.js
index e3f3fc2d9c3..ae7efffba42 100644
--- a/apps/workflowengine/src/workflowengine.js
+++ b/apps/workflowengine/src/workflowengine.js
@@ -23,9 +23,9 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import store from './store'
-import Settings from './components/Workflow'
-import ShippedChecks from './components/Checks'
+import store from './store.js'
+import Settings from './components/Workflow.vue'
+import ShippedChecks from './components/Checks/index.js'
 
 /**
  * A plugin for displaying a custom value field for checks
diff --git a/core/src/OC/appconfig.js b/core/src/OC/appconfig.js
index 4b03f8db5fb..551259bd46c 100644
--- a/core/src/OC/appconfig.js
+++ b/core/src/OC/appconfig.js
@@ -26,7 +26,7 @@
  */
 
 /* eslint-disable */
- import { getValue, setValue, getApps, getKeys, deleteKey } from '../OCP/appconfig'
+ import { getValue, setValue, getApps, getKeys, deleteKey } from '../OCP/appconfig.js'
 
 export const appConfig = window.oc_appconfig || {}
 
diff --git a/core/src/OC/appsettings.js b/core/src/OC/appsettings.js
index a81708ca461..ee41b7c6f85 100644
--- a/core/src/OC/appsettings.js
+++ b/core/src/OC/appsettings.js
@@ -23,7 +23,7 @@
 
 /* eslint-disable */
 import $ from 'jquery'
-import { filePath } from './routing'
+import { filePath } from './routing.js'
 import { generateFilePath } from "@nextcloud/router"
 
 /**
diff --git a/core/src/OC/backbone.js b/core/src/OC/backbone.js
index 17ef1c87109..5d93ce21428 100644
--- a/core/src/OC/backbone.js
+++ b/core/src/OC/backbone.js
@@ -22,7 +22,7 @@
  */
 
 import VendorBackbone from 'backbone'
-import { davCall, davSync } from './backbone-webdav'
+import { davCall, davSync } from './backbone-webdav.js'
 
 const Backbone = VendorBackbone.noConflict()
 
diff --git a/core/src/OC/contactsmenu.js b/core/src/OC/contactsmenu.js
index 58d319a03c0..b915a3f160c 100644
--- a/core/src/OC/contactsmenu.js
+++ b/core/src/OC/contactsmenu.js
@@ -27,7 +27,7 @@ import _ from 'underscore'
 import $ from 'jquery'
 import { Collection, Model, View } from 'backbone'
 
-import OC from './index'
+import OC from './index.js'
 
 /**
  * @class Contact
diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index 91b0e2fffea..45e9e99049d 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -47,9 +47,9 @@
 import _ from 'underscore'
 import $ from 'jquery'
 
-import OC from './index'
-import OCA from '../OCA/index'
-import { isA11yActivation } from '../Util/a11y'
+import OC from './index.js'
+import OCA from '../OCA/index.js'
+import { isA11yActivation } from '../Util/a11y.js'
 
 /**
  * this class to ease the usage of jquery dialogs
diff --git a/core/src/OC/eventsource.js b/core/src/OC/eventsource.js
index 537d68cb434..940b25655e4 100644
--- a/core/src/OC/eventsource.js
+++ b/core/src/OC/eventsource.js
@@ -29,7 +29,7 @@
 /* eslint-disable */
 import $ from 'jquery'
 
-import { getToken } from './requesttoken'
+import { getToken } from './requesttoken.js'
 
 /**
  * Create a new event source
diff --git a/core/src/OC/index.js b/core/src/OC/index.js
index 4ab535711ba..cc70bb550a7 100644
--- a/core/src/OC/index.js
+++ b/core/src/OC/index.js
@@ -24,17 +24,17 @@
 
 import { subscribe } from '@nextcloud/event-bus'
 
-import { addScript, addStyle } from './legacy-loader'
+import { addScript, addStyle } from './legacy-loader.js'
 import {
 	ajaxConnectionLostHandler,
 	processAjaxError,
 	registerXHRForErrorProcessing,
-} from './xhr-error'
-import Apps from './apps'
-import { AppConfig, appConfig } from './appconfig'
-import { appSettings } from './appsettings'
-import appswebroots from './appswebroots'
-import Backbone from './backbone'
+} from './xhr-error.js'
+import Apps from './apps.js'
+import { AppConfig, appConfig } from './appconfig.js'
+import { appSettings } from './appsettings.js'
+import appswebroots from './appswebroots.js'
+import Backbone from './backbone.js'
 import {
 	basename,
 	dirname,
@@ -45,8 +45,8 @@ import {
 import {
 	build as buildQueryString,
 	parse as parseQueryString,
-} from './query-string'
-import Config from './config'
+} from './query-string.js'
+import Config from './config.js'
 import {
 	coreApps,
 	menuSpeed,
@@ -58,30 +58,30 @@ import {
 	PERMISSION_SHARE,
 	PERMISSION_UPDATE,
 	TAG_FAVORITE,
-} from './constants'
-import ContactsMenu from './contactsmenu'
-import { currentUser, getCurrentUser } from './currentuser'
-import Dialogs from './dialogs'
-import EventSource from './eventsource'
-import { get, set } from './get_set'
-import { getCapabilities } from './capabilities'
+} from './constants.js'
+import ContactsMenu from './contactsmenu.js'
+import { currentUser, getCurrentUser } from './currentuser.js'
+import Dialogs from './dialogs.js'
+import EventSource from './eventsource.js'
+import { get, set } from './get_set.js'
+import { getCapabilities } from './capabilities.js'
 import {
 	getHost,
 	getHostName,
 	getPort,
 	getProtocol,
-} from './host'
+} from './host.js'
 import {
 	getToken as getRequestToken,
-} from './requesttoken'
+} from './requesttoken.js'
 import {
 	hideMenus,
 	registerMenu,
 	showMenu,
 	unregisterMenu,
-} from './menu'
-import { isUserAdmin } from './admin'
-import L10N from './l10n'
+} from './menu.js'
+import { isUserAdmin } from './admin.js'
+import L10N from './l10n.js'
 import {
 	getCanonicalLocale,
 	getLanguage,
@@ -100,16 +100,16 @@ import {
 
 import {
 	linkToRemoteBase,
-} from './routing'
-import msg from './msg'
-import Notification from './notification'
-import PasswordConfirmation from './password-confirmation'
-import Plugins from './plugins'
-import { theme } from './theme'
-import Util from './util'
-import { debug } from './debug'
-import { redirect, reload } from './navigation'
-import webroot from './webroot'
+} from './routing.js'
+import msg from './msg.js'
+import Notification from './notification.js'
+import PasswordConfirmation from './password-confirmation.js'
+import Plugins from './plugins.js'
+import { theme } from './theme.js'
+import Util from './util.js'
+import { debug } from './debug.js'
+import { redirect, reload } from './navigation.js'
+import webroot from './webroot.js'
 
 /** @namespace OC */
 export default {
diff --git a/core/src/OC/menu.js b/core/src/OC/menu.js
index 7d4d2f91a6c..efa917decd2 100644
--- a/core/src/OC/menu.js
+++ b/core/src/OC/menu.js
@@ -26,7 +26,7 @@ import _ from 'underscore'
 /** @typedef {import('jquery')} jQuery */
 import $ from 'jquery'
 
-import { menuSpeed } from './constants'
+import { menuSpeed } from './constants.js'
 
 export let currentMenu = null
 export let currentMenuToggle = null
diff --git a/core/src/OC/password-confirmation.js b/core/src/OC/password-confirmation.js
index 4aa643c19fb..45939efd227 100644
--- a/core/src/OC/password-confirmation.js
+++ b/core/src/OC/password-confirmation.js
@@ -27,7 +27,7 @@ import $ from 'jquery'
 import moment from 'moment'
 import { generateUrl } from '@nextcloud/router'
 
-import OC from './index'
+import OC from './index.js'
 
 /**
  * @namespace OC.PasswordConfirmation
diff --git a/core/src/OC/util-history.js b/core/src/OC/util-history.js
index a7398b4a2fc..d18b8743936 100644
--- a/core/src/OC/util-history.js
+++ b/core/src/OC/util-history.js
@@ -22,7 +22,7 @@
  */
 
 import _ from 'underscore'
-import OC from './index'
+import OC from './index.js'
 
 /**
  * Utility class for the history API,
diff --git a/core/src/OC/util.js b/core/src/OC/util.js
index 27485115f8d..8a50808b5cb 100644
--- a/core/src/OC/util.js
+++ b/core/src/OC/util.js
@@ -23,8 +23,8 @@
 
 import moment from 'moment'
 
-import History from './util-history'
-import OC from './index'
+import History from './util-history.js'
+import OC from './index.js'
 import { formatFileSize as humanFileSize } from '@nextcloud/files'
 
 /**
diff --git a/core/src/OC/xhr-error.js b/core/src/OC/xhr-error.js
index 990340a1fda..a346daa6984 100644
--- a/core/src/OC/xhr-error.js
+++ b/core/src/OC/xhr-error.js
@@ -24,8 +24,8 @@
 import _ from 'underscore'
 import $ from 'jquery'
 
-import OC from './index'
-import Notification from './notification'
+import OC from './index.js'
+import Notification from './notification.js'
 
 /**
  * Warn users that the connection to the server was lost temporarily
diff --git a/core/src/OCA/index.js b/core/src/OCA/index.js
index 1fde0dc5918..aefc85bdb72 100644
--- a/core/src/OCA/index.js
+++ b/core/src/OCA/index.js
@@ -20,7 +20,7 @@
  *
  */
 
-import Search from './search'
+import Search from './search.js'
 
 /**
  * Namespace for apps
diff --git a/core/src/OCP/appconfig.js b/core/src/OCP/appconfig.js
index 57e13048fe0..5bd8ca9efae 100644
--- a/core/src/OCP/appconfig.js
+++ b/core/src/OCP/appconfig.js
@@ -24,7 +24,7 @@
 import $ from 'jquery'
 import { generateOcsUrl } from '@nextcloud/router'
 
-import OC from '../OC/index'
+import OC from '../OC/index.js'
 
 /**
  * @param {string} method 'post' or 'delete'
diff --git a/core/src/OCP/index.js b/core/src/OCP/index.js
index 12766ad4977..aee37d17030 100644
--- a/core/src/OCP/index.js
+++ b/core/src/OCP/index.js
@@ -24,14 +24,14 @@
 
 import { loadState } from '@nextcloud/initial-state'
 
-import * as AppConfig from './appconfig'
-import * as Comments from './comments'
-import * as WhatsNew from './whatsnew'
+import * as AppConfig from './appconfig.js'
+import * as Comments from './comments.js'
+import * as WhatsNew from './whatsnew.js'
 
-import Accessibility from './accessibility'
-import Collaboration from './collaboration'
-import Loader from './loader'
-import Toast from './toast'
+import Accessibility from './accessibility.js'
+import Collaboration from './collaboration.js'
+import Loader from './loader.js'
+import Toast from './toast.js'
 
 /** @namespace OCP */
 export default {
diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index ed3a6293c57..9955663947e 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -64,8 +64,8 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
 export default {
 	name: 'AppMenu',
diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue
index 82491e42168..03496fc5d92 100644
--- a/core/src/components/UnifiedSearch/SearchResult.vue
+++ b/core/src/components/UnifiedSearch/SearchResult.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import NcHighlight from '@nextcloud/vue/dist/Components/NcHighlight'
+import NcHighlight from '@nextcloud/vue/dist/Components/NcHighlight.js'
 
 export default {
 	name: 'SearchResult',
diff --git a/core/src/components/login/LoginButton.vue b/core/src/components/login/LoginButton.vue
index 3d3ac25de6d..54c29245469 100644
--- a/core/src/components/login/LoginButton.vue
+++ b/core/src/components/login/LoginButton.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
 export default {
diff --git a/core/src/components/login/PasswordLessLoginForm.vue b/core/src/components/login/PasswordLessLoginForm.vue
index 455017b8683..0a8d09d1560 100644
--- a/core/src/components/login/PasswordLessLoginForm.vue
+++ b/core/src/components/login/PasswordLessLoginForm.vue
@@ -48,10 +48,10 @@
 import {
 	startAuthentication,
 	finishAuthentication,
-} from '../../services/WebAuthnAuthenticationService'
-import LoginButton from './LoginButton'
-import InformationIcon from 'vue-material-design-icons/Information'
-import LockOpenIcon from 'vue-material-design-icons/LockOpen'
+} from '../../services/WebAuthnAuthenticationService.js'
+import LoginButton from './LoginButton.vue'
+import InformationIcon from 'vue-material-design-icons/Information.vue'
+import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue'
 
 class NoValidCredentials extends Error {
 
diff --git a/core/src/components/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue
index 8032d1dbdc9..984a6800475 100644
--- a/core/src/components/setup/RecommendedApps.vue
+++ b/core/src/components/setup/RecommendedApps.vue
@@ -80,9 +80,9 @@ import { loadState } from '@nextcloud/initial-state'
 import pLimit from 'p-limit'
 import { translate as t } from '@nextcloud/l10n'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import logger from '../../logger'
+import logger from '../../logger.js'
 
 const recommended = {
 	calendar: {
diff --git a/core/src/globals.js b/core/src/globals.js
index 98bb6f64db8..8d60bde6eb0 100644
--- a/core/src/globals.js
+++ b/core/src/globals.js
@@ -24,20 +24,20 @@
  */
 
 /* eslint-disable @nextcloud/no-deprecations */
-import { initCore } from './init'
+import { initCore } from './init.js'
 
 import _ from 'underscore'
 import $ from 'jquery'
-import 'jquery-migrate/dist/jquery-migrate.min'
+import 'jquery-migrate/dist/jquery-migrate.min.js'
 // TODO: switch to `jquery-ui` package and import widgets and effects individually
 //       `jquery-ui-dist` is used as a workaround for the issue of missing effects
-import 'jquery-ui-dist/jquery-ui'
+import 'jquery-ui-dist/jquery-ui.js'
 import 'jquery-ui-dist/jquery-ui.css'
 import 'jquery-ui-dist/jquery-ui.theme.css'
 // END TODO
 import autosize from 'autosize'
 import Backbone from 'backbone'
-import './Polyfill/tooltip'
+import './Polyfill/tooltip.js'
 import ClipboardJS from 'clipboard'
 import { dav } from 'davclient.js'
 import Handlebars from 'handlebars'
@@ -45,14 +45,14 @@ import md5 from 'blueimp-md5'
 import moment from 'moment'
 import 'select2'
 import 'select2/select2.css'
-import 'snap.js/dist/snap'
+import 'snap.js/dist/snap.js'
 import 'strengthify'
 import 'strengthify/strengthify.css'
 
-import OC from './OC/index'
-import OCP from './OCP/index'
-import OCA from './OCA/index'
-import { getToken as getRequestToken } from './OC/requesttoken'
+import OC from './OC/index.js'
+import OCP from './OCP/index.js'
+import OCA from './OCA/index.js'
+import { getToken as getRequestToken } from './OC/requesttoken.js'
 
 const warnIfNotTesting = function() {
 	if (window.TESTING === undefined) {
diff --git a/core/src/install.js b/core/src/install.js
index 9892e45f8b6..e8432de42b0 100644
--- a/core/src/install.js
+++ b/core/src/install.js
@@ -24,16 +24,16 @@
 
 import $ from 'jquery'
 import { translate as t } from '@nextcloud/l10n'
-import { getToken } from './OC/requesttoken'
-import getURLParameter from './Util/get-url-parameter'
+import { getToken } from './OC/requesttoken.js'
+import getURLParameter from './Util/get-url-parameter.js'
 
-import './jquery/showpassword'
+import './jquery/showpassword.js'
 
-import 'jquery-ui/ui/widgets/button'
+import 'jquery-ui/ui/widgets/button.js'
 import 'jquery-ui/themes/base/theme.css'
 import 'jquery-ui/themes/base/button.css'
 
-import './Polyfill/tooltip'
+import './Polyfill/tooltip.js'
 
 import 'strengthify'
 import 'strengthify/strengthify.css'
diff --git a/core/src/jquery/avatar.js b/core/src/jquery/avatar.js
index 12fcc7264ae..1d86e54e9d3 100644
--- a/core/src/jquery/avatar.js
+++ b/core/src/jquery/avatar.js
@@ -23,7 +23,7 @@
 
 import $ from 'jquery'
 
-import OC from '../OC'
+import OC from '../OC/index.js'
 
 /**
  * This plugin inserts the right avatar for the user, depending on, whether a
diff --git a/core/src/jquery/contactsmenu.js b/core/src/jquery/contactsmenu.js
index 2cf2daec570..4026f48068d 100644
--- a/core/src/jquery/contactsmenu.js
+++ b/core/src/jquery/contactsmenu.js
@@ -24,7 +24,7 @@
 
 import $ from 'jquery'
 
-import OC from '../OC'
+import OC from '../OC/index.js'
 import { isA11yActivation } from '../Util/a11y.js'
 
 const LIST = ''
diff --git a/core/src/jquery/index.js b/core/src/jquery/index.js
index 305b038ce37..c0716890cb3 100644
--- a/core/src/jquery/index.js
+++ b/core/src/jquery/index.js
@@ -24,17 +24,17 @@
 
 import $ from 'jquery'
 
-import './avatar'
-import './contactsmenu'
-import './exists'
-import './filterattr'
-import './ocdialog'
-import './octemplate'
-import './placeholder'
-import './requesttoken'
-import './selectrange'
-import './showpassword'
-import './ui-fixes'
+import './avatar.js'
+import './contactsmenu.js'
+import './exists.js'
+import './filterattr.js'
+import './ocdialog.js'
+import './octemplate.js'
+import './placeholder.js'
+import './requesttoken.js'
+import './selectrange.js'
+import './showpassword.js'
+import './ui-fixes.js'
 
 import './css/jquery-ui-fixes.scss'
 import './css/jquery.ocdialog.scss'
diff --git a/core/src/jquery/ocdialog.js b/core/src/jquery/ocdialog.js
index 9ba54d868c3..63b8082da06 100644
--- a/core/src/jquery/ocdialog.js
+++ b/core/src/jquery/ocdialog.js
@@ -24,7 +24,7 @@
  */
 
 import $ from 'jquery'
-import { isA11yActivation } from '../Util/a11y'
+import { isA11yActivation } from '../Util/a11y.js'
 
 $.widget('oc.ocdialog', {
 	options: {
diff --git a/core/src/jquery/requesttoken.js b/core/src/jquery/requesttoken.js
index 07524966994..68858aa1534 100644
--- a/core/src/jquery/requesttoken.js
+++ b/core/src/jquery/requesttoken.js
@@ -23,7 +23,7 @@
 
 import $ from 'jquery'
 
-import { getToken } from '../OC/requesttoken'
+import { getToken } from '../OC/requesttoken.js'
 
 $(document).on('ajaxSend', function(elm, xhr, settings) {
 	if (settings.crossDomain === false) {
diff --git a/core/src/login.js b/core/src/login.js
index 6757c5e7bdd..964b26520ec 100644
--- a/core/src/login.js
+++ b/core/src/login.js
@@ -26,9 +26,9 @@
 import Vue from 'vue'
 
 // eslint-disable-next-line no-unused-vars
-import OC from './OC/index' // TODO: Not needed but L10n breaks if removed
+import OC from './OC/index.js' // TODO: Not needed but L10n breaks if removed
 import LoginView from './views/Login.vue'
-import Nextcloud from './mixins/Nextcloud'
+import Nextcloud from './mixins/Nextcloud.js'
 
 Vue.mixin(Nextcloud)
 
diff --git a/core/src/main.js b/core/src/main.js
index ec23171b6ea..f76d4f0b8e1 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -24,8 +24,8 @@
  */
 
 import $ from 'jquery'
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
+import 'core-js/stable/index.js'
+import 'regenerator-runtime/runtime.js'
 import './Polyfill/index.js'
 
 // If you remove the line below, tests won't pass
diff --git a/core/src/mixins/Nextcloud.js b/core/src/mixins/Nextcloud.js
index 7fda65d3d9d..4cef2b9b09e 100644
--- a/core/src/mixins/Nextcloud.js
+++ b/core/src/mixins/Nextcloud.js
@@ -20,8 +20,8 @@
  *
  */
 
-import L10n from '../OC/l10n'
-import OC from '../OC/index'
+import L10n from '../OC/l10n.js'
+import OC from '../OC/index.js'
 
 export default {
 	data() {
diff --git a/core/src/recommendedapps.js b/core/src/recommendedapps.js
index 89e8b930827..31179a5a4ad 100644
--- a/core/src/recommendedapps.js
+++ b/core/src/recommendedapps.js
@@ -24,8 +24,8 @@ import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
 
-import logger from './logger'
-import RecommendedApps from './components/setup/RecommendedApps'
+import logger from './logger.js'
+import RecommendedApps from './components/setup/RecommendedApps.vue'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
diff --git a/core/src/session-heartbeat.js b/core/src/session-heartbeat.js
index 4a15d7d2de9..153408b767b 100644
--- a/core/src/session-heartbeat.js
+++ b/core/src/session-heartbeat.js
@@ -29,8 +29,8 @@ import { loadState } from '@nextcloud/initial-state'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 
-import OC from './OC'
-import { setToken as setRequestToken, getToken as getRequestToken } from './OC/requesttoken'
+import OC from './OC/index.js'
+import { setToken as setRequestToken, getToken as getRequestToken } from './OC/requesttoken.js'
 
 let config = null
 /**
diff --git a/core/src/tests/OC/requesttoken.spec.js b/core/src/tests/OC/requesttoken.spec.js
index 741dc65746b..57a3d4de3c1 100644
--- a/core/src/tests/OC/requesttoken.spec.js
+++ b/core/src/tests/OC/requesttoken.spec.js
@@ -24,7 +24,7 @@
 
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import { manageToken, setToken } from '../../OC/requesttoken'
+import { manageToken, setToken } from '../../OC/requesttoken.js'
 
 describe('request token', () => {
 
diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
index c7571fff148..4d83421673a 100644
--- a/core/src/views/Profile.vue
+++ b/core/src/views/Profile.vue
@@ -155,14 +155,14 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import MapMarkerIcon from 'vue-material-design-icons/MapMarker'
-import PencilIcon from 'vue-material-design-icons/Pencil'
-import AccountIcon from 'vue-material-design-icons/Account'
-
-import PrimaryActionButton from '../components/Profile/PrimaryActionButton'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import AccountIcon from 'vue-material-design-icons/Account.vue'
+
+import PrimaryActionButton from '../components/Profile/PrimaryActionButton.vue'
 
 const status = loadState('core', 'status', {})
 const {
diff --git a/core/src/views/UnsupportedBrowser.vue b/core/src/views/UnsupportedBrowser.vue
index e46c64da24c..868651a1668 100644
--- a/core/src/views/UnsupportedBrowser.vue
+++ b/core/src/views/UnsupportedBrowser.vue
@@ -51,8 +51,8 @@
 import { generateUrl } from '@nextcloud/router'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import Web from 'vue-material-design-icons/Web'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import Web from 'vue-material-design-icons/Web.vue'
 
 import { browserStorageKey } from '../utils/RedirectUnsupportedBrowsers.js'
 import { supportedBrowsers } from '../services/BrowsersListService.js'