30 files changed, 80 insertions, 80 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 86e2a55..193afe6 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -23,11 +23,11 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
-import ServicePanel from './ServicePanel';
-import WindowTitle from './WindowTitle';
-import Sidebar from './sidebar/Sidebar';
+import ServicePanel from './ServicePanel.js';
+import WindowTitle from './WindowTitle.js';
+import Sidebar from './sidebar/Sidebar.js';
 
 const AppRoot = styled(Box)({
   display: 'flex',
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 2bfc9b0..b309c4d 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -22,7 +22,7 @@ import Box from '@mui/material/Box';
 import throttle from 'lodash-es/throttle';
 import React, { ReactNode, useCallback, useRef } from 'react';
 
-import Service from '../stores/Service';
+import Service from '../stores/Service.js';
 
 function BrowserViewPlaceholder({
   service,
diff --git a/packages/renderer/src/components/ServicePanel.tsx b/packages/renderer/src/components/ServicePanel.tsx
index 2c79d99..507bc15 100644
--- a/packages/renderer/src/components/ServicePanel.tsx
+++ b/packages/renderer/src/components/ServicePanel.tsx
@@ -23,14 +23,14 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import type RendererStore from '../stores/RendererStore';
-import Service from '../stores/Service';
+import type RendererStore from '../stores/RendererStore.js';
+import Service from '../stores/Service.js';
 
-import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import InsecureConnectionBanner from './banner/InsecureConnectionBanner';
-import NewWindowBanner from './banner/NewWindowBanner';
-import ErrorPage from './errorPage/ErrorPage';
-import LocationBar from './locationBar/LocationBar';
+import BrowserViewPlaceholder from './BrowserViewPlaceholder.js';
+import InsecureConnectionBanner from './banner/InsecureConnectionBanner.js';
+import NewWindowBanner from './banner/NewWindowBanner.js';
+import ErrorPage from './errorPage/ErrorPage.js';
+import LocationBar from './locationBar/LocationBar.js';
 
 const ServicePanelRoot = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'hidden',
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index aa14039..50cc1c9 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -25,7 +25,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { type ReactNode } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
 function ThemeProvider({
   children,
diff --git a/packages/renderer/src/components/WindowTitle.tsx b/packages/renderer/src/components/WindowTitle.tsx
index 95e0fe6..fca8b4f 100644
--- a/packages/renderer/src/components/WindowTitle.tsx
+++ b/packages/renderer/src/components/WindowTitle.tsx
@@ -22,7 +22,7 @@ import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../stores/Service';
+import type Service from '../stores/Service.js';
 
 function WindowTitle({
   selectedService,
diff --git a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
index 0b70db6..6165153 100644
--- a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
+++ b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
@@ -27,9 +27,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from './NotificationBanner.js';
 
 function InsecureConnectionBanner({
   service,
diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx
index ad9d07d..b9b0e4a 100644
--- a/packages/renderer/src/components/banner/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx
@@ -29,9 +29,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import NotificationBanner from './NotificationBanner';
+import NotificationBanner from './NotificationBanner.js';
 
 function NewWindowBanner({
   service,
diff --git a/packages/renderer/src/components/banner/NotificationBanner.tsx b/packages/renderer/src/components/banner/NotificationBanner.tsx
index 818f498..70fe693 100644
--- a/packages/renderer/src/components/banner/NotificationBanner.tsx
+++ b/packages/renderer/src/components/banner/NotificationBanner.tsx
@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Typography } from '@mui/material';
 import Alert, { AlertColor } from '@mui/material/Alert';
 import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
diff --git a/packages/renderer/src/components/errorPage/CertificateDetails.tsx b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
index 51e7920..04d483e 100644
--- a/packages/renderer/src/components/errorPage/CertificateDetails.tsx
+++ b/packages/renderer/src/components/errorPage/CertificateDetails.tsx
@@ -32,10 +32,10 @@ import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import SingleCertificateDetails from './SingleCertificateDetails';
-import TrustCertificateDialog from './TrustCertificateDialog';
+import SingleCertificateDetails from './SingleCertificateDetails.js';
+import TrustCertificateDialog from './TrustCertificateDialog.js';
 
 const SUMMARY_ID = 'Sophie-CertificateDetails-header';
 const DETAILS_ID = 'Sophie-CertificateDetails-content';
diff --git a/packages/renderer/src/components/errorPage/ErrorPage.tsx b/packages/renderer/src/components/errorPage/ErrorPage.tsx
index 10f54cd..dc01ddf 100644
--- a/packages/renderer/src/components/errorPage/ErrorPage.tsx
+++ b/packages/renderer/src/components/errorPage/ErrorPage.tsx
@@ -29,9 +29,9 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
-import CertificateDetails from './CertificateDetails';
+import CertificateDetails from './CertificateDetails.js';
 
 interface ErrorDetails {
   icon: JSX.Element;
diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 4d4c3c4..bea115d 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -25,7 +25,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 function ExtraButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
diff --git a/packages/renderer/src/components/locationBar/GoButton.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx
index 471f25e..571124a 100644
--- a/packages/renderer/src/components/locationBar/GoButton.tsx
+++ b/packages/renderer/src/components/locationBar/GoButton.tsx
@@ -22,7 +22,7 @@ import IconGo from '@mui/icons-material/Send';
 import IconButton from '@mui/material/IconButton';
 import React, { MouseEventHandler } from 'react';
 
-import LocationInputAdornment from './LocationInputAdornment';
+import LocationInputAdornment from './LocationInputAdornment.js';
 
 export default function GoButton({
   onClick,
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index 11981e9..fd7dcbb 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -22,12 +22,12 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import type RendererStore from '../../stores/RendererStore';
-import type Service from '../../stores/Service';
+import type RendererStore from '../../stores/RendererStore.js';
+import type Service from '../../stores/Service.js';
 
-import ExtraButtons from './ExtraButtons';
-import LocationTextField from './LocationTextField';
-import NavigationButtons from './NavigationButtons';
+import ExtraButtons from './ExtraButtons.js';
+import LocationTextField from './LocationTextField.js';
+import NavigationButtons from './NavigationButtons.js';
 
 export function getLocaltionBarID(service: Service): string {
   return `Sophie-${service.id}-LocationBar`;
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 1d6b561..9b028b3 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -24,12 +24,12 @@ import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import Service from '../../stores/Service';
+import Service from '../../stores/Service.js';
 
-import GoButton from './GoButton';
-import LocationOverlayInput from './LocationOverlayInput';
-import SecurityLabel from './SecurityLabel';
-import UrlOverlay from './UrlOverlay';
+import GoButton from './GoButton.js';
+import LocationOverlayInput from './LocationOverlayInput.js';
+import SecurityLabel from './SecurityLabel.js';
+import UrlOverlay from './UrlOverlay.js';
 
 const LocationTextFieldRoot = styled(FilledInput, {
   name: 'LocationTextField',
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 96e40e7..ab455eb 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -23,14 +23,14 @@ import IconArrowForward from '@mui/icons-material/ArrowForward';
 import IconStop from '@mui/icons-material/Close';
 import IconHome from '@mui/icons-material/HomeOutlined';
 import IconRefresh from '@mui/icons-material/Refresh';
-import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 function NavigationButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index ac51cff..7521fa6 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -27,8 +27,8 @@ import { SecurityLabelKind } from '@sophie/shared';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import LocationInputAdornment from './LocationInputAdornment';
-import getAlertColor from './getAlertColor';
+import LocationInputAdornment from './LocationInputAdornment.js';
+import getAlertColor from './getAlertColor.js';
 
 const SecurityLabelRoot = styled(LocationInputAdornment, {
   name: 'SecurityLabel',
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index a71fa4e..eaa86d2 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -21,7 +21,7 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import getAlertColor from './getAlertColor';
+import getAlertColor from './getAlertColor.js';
 
 export type SplitResult =
   | {
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 7a6d58a..f3f025a 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -24,7 +24,7 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
-import type Service from '../../stores/Service';
+import type Service from '../../stores/Service.js';
 
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 7aa9124..56487df 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -26,11 +26,11 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
-import type Service from '../../stores/Service';
-import { getServicePanelID } from '../ServicePanel';
+import type RendererStore from '../../stores/RendererStore.js';
+import type Service from '../../stores/Service.js';
+import { getServicePanelID } from '../ServicePanel.js';
 
-import ServiceIcon from './ServiceIcon';
+import ServiceIcon from './ServiceIcon.js';
 
 const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 6c802ac..7308900 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -22,11 +22,11 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import RendererStore from '../../stores/RendererStore';
+import RendererStore from '../../stores/RendererStore.js';
 
-import ServiceSwitcher from './ServiceSwitcher';
-import ToggleDarkModeButton from './ToggleDarkModeButton';
-import ToggleLocationBarButton from './ToggleLocationBarButton';
+import ServiceSwitcher from './ServiceSwitcher.js';
+import ToggleDarkModeButton from './ToggleDarkModeButton.js';
+import ToggleLocationBarButton from './ToggleLocationBarButton.js';
 
 const SidebarRoot = styled(Box)(({ theme }) => ({
   flex: 0,
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index a922389..5e15d4b 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -25,7 +25,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
+import type RendererStore from '../../stores/RendererStore.js';
 
 function ToggleDarkModeButton({
   store: { shared },
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index b6644a3..64b4ca9 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -20,15 +20,15 @@
 
 import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
-import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type RendererStore from '../../stores/RendererStore';
-import { getLocaltionBarID } from '../locationBar/LocationBar';
+import type RendererStore from '../../stores/RendererStore.js';
+import { getLocaltionBarID } from '../locationBar/LocationBar.js';
 
 function ToggleLocationBarIcon({
   loading,
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx
index 1303314..8b6fcf2 100644
--- a/packages/renderer/src/i18n/RtlCacheProvider.tsx
+++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx
@@ -23,7 +23,7 @@ import { CacheProvider } from '@emotion/react';
 import { observer } from 'mobx-react-lite';
 import React, { type ReactNode } from 'react';
 
-import type RendererStore from '../stores/RendererStore';
+import type RendererStore from '../stores/RendererStore.js';
 
 function RtlCacheProvider({
   children,
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index 4d7b84a..d3ad252 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -24,10 +24,10 @@ import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import { initReactI18next } from 'react-i18next';
 
-import RendererStore from '../stores/RendererStore';
-import { getLogger } from '../utils/log';
+import RendererStore from '../stores/RendererStore.js';
+import { getLogger } from '../utils/log.js';
 
-import RendererIpcI18nBackend from './RendererIpcI18nBackend';
+import RendererIpcI18nBackend from './RendererIpcI18nBackend.js';
 
 const log = getLogger('loadRendererLocalization');
 
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 980e4dd..32fcee6 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -25,14 +25,14 @@ import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import './style.css';
-import Loading from './components/Loading';
-import ThemeProvider from './components/ThemeProvider';
-import { exposeToReduxDevtools, hotReload } from './devTools';
-import RtlCacheProvider from './i18n/RtlCacheProvider';
-import createRtlCache from './i18n/createRtlCache';
-import loadRendererLocalization from './i18n/loadRendererLoalization';
-import { createAndConnectRendererStore } from './stores/RendererStore';
-import { getLogger } from './utils/log';
+import Loading from './components/Loading.js';
+import ThemeProvider from './components/ThemeProvider.js';
+import { exposeToReduxDevtools, hotReload } from './devTools.js';
+import RtlCacheProvider from './i18n/RtlCacheProvider.js';
+import createRtlCache from './i18n/createRtlCache.js';
+import loadRendererLocalization from './i18n/loadRendererLoalization.js';
+import { createAndConnectRendererStore } from './stores/RendererStore.js';
+import { getLogger } from './utils/log.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
@@ -65,7 +65,7 @@ addDisposer(store, disposeSetHtmlLang);
 
 const rtlCache = createRtlCache();
 
-const App = lazy(() => import('./components/App'));
+const App = lazy(() => import('./components/App.js'));
 
 function Root(): JSX.Element {
   return (
diff --git a/packages/renderer/src/stores/GlobalSettings.ts b/packages/renderer/src/stores/GlobalSettings.ts
index 52971d4..11c2ebd 100644
--- a/packages/renderer/src/stores/GlobalSettings.ts
+++ b/packages/renderer/src/stores/GlobalSettings.ts
@@ -21,8 +21,8 @@
 import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import { getEnv } from './RendererEnv';
-import Service from './Service';
+import { getEnv } from './RendererEnv.js';
+import Service from './Service.js';
 
 const GlobalSettings = defineGlobalSettingsModel(Service).actions((self) => ({
   setSelectedServiceId(serviceId: string): void {
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index a3983ca..c4110bd 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -21,12 +21,12 @@
 import type { SophieRenderer } from '@sophie/shared';
 import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
 
-import { getLogger } from '../utils/log';
+import { getLogger } from '../utils/log.js';
 
-import type GlobalSettings from './GlobalSettings';
-import type RendererEnv from './RendererEnv';
-import type Service from './Service';
-import SharedStore from './SharedStore';
+import type GlobalSettings from './GlobalSettings.js';
+import type RendererEnv from './RendererEnv.js';
+import type Service from './Service.js';
+import SharedStore from './SharedStore.js';
 
 const log = getLogger('RendererStore');
 
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index c8d513f..ff01964 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -25,8 +25,8 @@ import {
 } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import { getEnv } from './RendererEnv';
-import ServiceSettings from './ServiceSettings';
+import { getEnv } from './RendererEnv.js';
+import ServiceSettings from './ServiceSettings.js';
 
 const Service = defineServiceModel(ServiceSettings)
   .views((self) => ({
diff --git a/packages/renderer/src/stores/ServiceSettings.ts b/packages/renderer/src/stores/ServiceSettings.ts
index 5d37347..d5c2843 100644
--- a/packages/renderer/src/stores/ServiceSettings.ts
+++ b/packages/renderer/src/stores/ServiceSettings.ts
@@ -21,7 +21,7 @@
 import { defineServiceSettingsModel } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import Profile from './Profile';
+import Profile from './Profile.js';
 
 const ServiceSettings = defineServiceSettingsModel(Profile);
 
diff --git a/packages/renderer/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
index 062479d..0b04a86 100644
--- a/packages/renderer/src/stores/SharedStore.ts
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -21,9 +21,9 @@
 import { defineSharedStoreModel } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
-import GlobalSettings from './GlobalSettings';
-import Profile from './Profile';
-import Service from './Service';
+import GlobalSettings from './GlobalSettings.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
 
 const SharedStore = defineSharedStoreModel(
   GlobalSettings,