chore: use node16 moduleResolution where possible

We can't do this in the renderer package, because we need to import MUI
files that are not exported (MUI v6 is not ESM yet).

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

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,