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>

93 files changed, 309 insertions, 294 deletions

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3d944e4..e76ff6f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -44,8 +44,9 @@ module.exports = {
     },
   },
   rules: {
-    // TODO Flip this to `ignorePackages` once we are on `nodenext` resolution.
-    'import/extensions': ['error', 'never'],
+    // `import/exteions` is buggy with ts files:
+    // https://github.com/import-js/eslint-plugin-import/issues/2111
+    'import/extensions': 'off',
     'import/no-unresolved': 'error',
     'import/order': [
       'error',
@@ -107,13 +108,6 @@ module.exports = {
       },
     },
     {
-      files: ['**/*.js'],
-      rules: {
-        // ESM requires extensions for imports.
-        'import/extensions': ['error', 'ignorePackages'],
-      },
-    },
-    {
       files: ['**/*.cjs'],
       parserOptions: {
         sourceType: 'script',
diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index ff7594e..64522ce 100644
--- a/config/tsconfig.base.json
+++ b/config/tsconfig.base.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "module": "esnext",
-    "target": "esnext",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "target": "es2022",
+    "moduleResolution": "Node16",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
@@ -12,6 +12,6 @@
     "isolatedModules": true,
     "skipLibCheck": true,
     "checkJs": true,
-    "lib": ["esnext"]
+    "lib": ["es2021"]
   }
 }
diff --git a/packages/main/src/i18n/I18nStore.ts b/packages/main/src/i18n/I18nStore.ts
index 8ea4430..4c77322 100644
--- a/packages/main/src/i18n/I18nStore.ts
+++ b/packages/main/src/i18n/I18nStore.ts
@@ -21,7 +21,7 @@
 import type { i18n, ResourceKey, TFunction } from 'i18next';
 import { IAtom, createAtom } from 'mobx';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('I18nStore');
 
diff --git a/packages/main/src/i18n/RepositoryBasedI18nBackend.ts b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
index 23f70d7..5b667d5 100644
--- a/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
+++ b/packages/main/src/i18n/RepositoryBasedI18nBackend.ts
@@ -26,9 +26,9 @@ import type {
 } from 'i18next';
 import { debounce } from 'lodash-es';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import type LocatlizationRepository from './LocalizationRepository';
+import type LocatlizationRepository from './LocalizationRepository.js';
 
 const MISSING_ENTRIES_DEBOUNCE_TIME_MS = 1000;
 
diff --git a/packages/main/src/i18n/i18nLog.ts b/packages/main/src/i18n/i18nLog.ts
index 308a1cc..94f6473 100644
--- a/packages/main/src/i18n/i18nLog.ts
+++ b/packages/main/src/i18n/i18nLog.ts
@@ -20,7 +20,7 @@
 
 import type { LoggerModule } from 'i18next';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('i18nLog');
 
diff --git a/packages/main/src/i18n/impl/LocaltizationFiles.ts b/packages/main/src/i18n/impl/LocaltizationFiles.ts
index 9cd854e..74e3ae3 100644
--- a/packages/main/src/i18n/impl/LocaltizationFiles.ts
+++ b/packages/main/src/i18n/impl/LocaltizationFiles.ts
@@ -22,10 +22,10 @@ import { readFile, writeFile } from 'node:fs/promises';
 
 import type { ResourceKey } from 'i18next';
 
-import type Resources from '../../infrastructure/resources/Resources';
-import getLogger from '../../utils/getLogger';
-import isErrno from '../../utils/isErrno';
-import type LocatlizationRepository from '../LocalizationRepository';
+import type Resources from '../../infrastructure/resources/Resources.js';
+import getLogger from '../../utils/getLogger.js';
+import isErrno from '../../utils/isErrno.js';
+import type LocatlizationRepository from '../LocalizationRepository.js';
 
 const log = getLogger('LocalizationFiles');
 
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index e62b3e3..19da9e2 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -23,13 +23,13 @@ import i18next, { i18n } from 'i18next';
 import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
-import type MainStore from '../stores/MainStore';
-import getLogger from '../utils/getLogger';
+import type MainStore from '../stores/MainStore.js';
+import getLogger from '../utils/getLogger.js';
 
-import I18nStore from './I18nStore';
-import type LocatlizationRepository from './LocalizationRepository';
-import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
-import i18nLog from './i18nLog';
+import I18nStore from './I18nStore.js';
+import type LocatlizationRepository from './LocalizationRepository.js';
+import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend.js';
+import i18nLog from './i18nLog.js';
 
 const log = getLogger('loadLocationzation');
 
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 3494f25..3496212 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -23,11 +23,11 @@ import os from 'node:os';
 
 import { app } from 'electron';
 
-import { enableStacktraceSourceMaps } from './infrastructure/electron/impl/devTools';
-import electronShell from './infrastructure/electron/impl/electronShell';
-import initReactions from './initReactions';
-import MainStore from './stores/MainStore';
-import getLogger from './utils/getLogger';
+import { enableStacktraceSourceMaps } from './infrastructure/electron/impl/devTools.js';
+import electronShell from './infrastructure/electron/impl/electronShell.js';
+import initReactions from './initReactions.js';
+import MainStore from './stores/MainStore.js';
+import getLogger from './utils/getLogger.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
diff --git a/packages/main/src/infrastructure/config/ConfigRepository.ts b/packages/main/src/infrastructure/config/ConfigRepository.ts
index 67bffb0..7d5e12b 100644
--- a/packages/main/src/infrastructure/config/ConfigRepository.ts
+++ b/packages/main/src/infrastructure/config/ConfigRepository.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type Disposer from '../../utils/Disposer';
+import type Disposer from '../../utils/Disposer.js';
 
 export type ReadConfigResult =
   | { found: true; contents: string }
diff --git a/packages/main/src/infrastructure/config/impl/ConfigFile.ts b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
index 6203c89..684a827 100644
--- a/packages/main/src/infrastructure/config/impl/ConfigFile.ts
+++ b/packages/main/src/infrastructure/config/impl/ConfigFile.ts
@@ -24,11 +24,11 @@ import path from 'node:path';
 
 import { throttle } from 'lodash-es';
 
-import type Disposer from '../../../utils/Disposer';
-import getLogger from '../../../utils/getLogger';
-import isErrno from '../../../utils/isErrno';
-import type ConfigRepository from '../ConfigRepository';
-import type { ReadConfigResult } from '../ConfigRepository';
+import type Disposer from '../../../utils/Disposer.js';
+import getLogger from '../../../utils/getLogger.js';
+import isErrno from '../../../utils/isErrno.js';
+import type ConfigRepository from '../ConfigRepository.js';
+import type { ReadConfigResult } from '../ConfigRepository.js';
 
 const log = getLogger('ConfigFile');
 
diff --git a/packages/main/src/infrastructure/electron/RendererBridge.ts b/packages/main/src/infrastructure/electron/RendererBridge.ts
index 097580a..921f09a 100644
--- a/packages/main/src/infrastructure/electron/RendererBridge.ts
+++ b/packages/main/src/infrastructure/electron/RendererBridge.ts
@@ -26,8 +26,8 @@ import {
   onPatch,
 } from 'mobx-state-tree';
 
-import type MainStore from '../../stores/MainStore';
-import Disposer from '../../utils/Disposer';
+import type MainStore from '../../stores/MainStore.js';
+import Disposer from '../../utils/Disposer.js';
 
 export type PatchListener = (patch: IJsonPatch[]) => void;
 
diff --git a/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts b/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
index b7c8a76..e29429d 100644
--- a/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
+++ b/packages/main/src/infrastructure/electron/__tests__/RendererBridge.test.ts
@@ -30,8 +30,8 @@ import {
   unprotect,
 } from 'mobx-state-tree';
 
-import MainStore from '../../../stores/MainStore';
-import RendererBridge, { type PatchListener } from '../RendererBridge';
+import MainStore from '../../../stores/MainStore.js';
+import RendererBridge, { type PatchListener } from '../RendererBridge.js';
 
 const TestStore = MainStore.actions((theSelf) => ({
   /**
diff --git a/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts b/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
index d963704..0c6dd1c 100644
--- a/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
+++ b/packages/main/src/infrastructure/electron/__tests__/UserAgents.test.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import UserAgents from '../UserAgents';
+import UserAgents from '../UserAgents.js';
 
 let userAgents: UserAgents;
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
index 20a1f70..c4b3823 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
@@ -27,15 +27,15 @@ import {
 import { BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
 
-import type MainStore from '../../../stores/MainStore';
-import getLogger from '../../../utils/getLogger';
-import RendererBridge from '../RendererBridge';
-import type { MainWindow, ServiceView } from '../types';
-
-import ElectronServiceView from './ElectronServiceView';
-import type ElectronViewFactory from './ElectronViewFactory';
-import { openDevToolsWhenReady } from './devTools';
-import lockWebContentsToFile from './lockWebContentsToFile';
+import type MainStore from '../../../stores/MainStore.js';
+import getLogger from '../../../utils/getLogger.js';
+import RendererBridge from '../RendererBridge.js';
+import type { MainWindow, ServiceView } from '../types.js';
+
+import ElectronServiceView from './ElectronServiceView.js';
+import type ElectronViewFactory from './ElectronViewFactory.js';
+import { openDevToolsWhenReady } from './devTools.js';
+import lockWebContentsToFile from './lockWebContentsToFile.js';
 
 const log = getLogger('ElectronMainWindow');
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts b/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
index e60ce21..d1220c5 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronPartition.ts
@@ -20,10 +20,10 @@
 
 import { Session, session } from 'electron';
 
-import type Profile from '../../../stores/Profile';
-import type { Partition } from '../types';
+import type Profile from '../../../stores/Profile.js';
+import type { Partition } from '../types.js';
 
-import type ElectronViewFactory from './ElectronViewFactory';
+import type ElectronViewFactory from './ElectronViewFactory.js';
 
 export default class ElectronPartition implements Partition {
   readonly id: string;
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index a9298bd..91247c8 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -20,13 +20,13 @@
 
 import { BrowserView } from 'electron';
 
-import type Service from '../../../stores/Service';
-import getLogger from '../../../utils/getLogger';
-import type Resources from '../../resources/Resources';
-import type { ServiceView } from '../types';
+import type Service from '../../../stores/Service.js';
+import getLogger from '../../../utils/getLogger.js';
+import type Resources from '../../resources/Resources.js';
+import type { ServiceView } from '../types.js';
 
-import ElectronPartition from './ElectronPartition';
-import type ElectronViewFactory from './ElectronViewFactory';
+import ElectronPartition from './ElectronPartition.js';
+import type ElectronViewFactory from './ElectronViewFactory.js';
 
 const log = getLogger('ElectronServiceView');
 
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
index c72860d..df3de85 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
@@ -18,16 +18,21 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type MainStore from '../../../stores/MainStore';
-import type Profile from '../../../stores/Profile';
-import type Service from '../../../stores/Service';
-import type Resources from '../../resources/Resources';
-import type UserAgents from '../UserAgents';
-import type { MainWindow, Partition, ServiceView, ViewFactory } from '../types';
+import type MainStore from '../../../stores/MainStore.js';
+import type Profile from '../../../stores/Profile.js';
+import type Service from '../../../stores/Service.js';
+import type Resources from '../../resources/Resources.js';
+import type UserAgents from '../UserAgents.js';
+import type {
+  MainWindow,
+  Partition,
+  ServiceView,
+  ViewFactory,
+} from '../types.js';
 
-import ElectronMainWindow from './ElectronMainWindow';
-import ElectronPartition from './ElectronPartition';
-import ElectronServiceView from './ElectronServiceView';
+import ElectronMainWindow from './ElectronMainWindow.js';
+import ElectronPartition from './ElectronPartition.js';
+import ElectronServiceView from './ElectronServiceView.js';
 
 export default class ElectronViewFactory implements ViewFactory {
   private readonly webContentsIdToServiceView = new Map<
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
index 67cf689..75b12ac 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/electron.integ.test.ts
@@ -1,6 +1,6 @@
 import { BrowserWindow } from 'electron';
 
-import '../ElectronMainWindow';
+import '../ElectronMainWindow.js';
 
 test('create a BrowserWindow', async () => {
   const w = new BrowserWindow();
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
index 7b70d10..bbbd675 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/hardenSession.test.ts
@@ -30,8 +30,8 @@ import type {
   WebContents,
 } from 'electron';
 
-import type Resources from '../../../resources/Resources';
-import hardenSession from '../hardenSession';
+import type Resources from '../../../resources/Resources.js';
+import hardenSession from '../hardenSession.js';
 
 const permissions = [
   'clipboard-read',
diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
index 47525d3..6332db7 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.test.ts
@@ -25,8 +25,8 @@ import { fake } from '@sophie/test-utils';
 import type { Event, HandlerDetails, WebContents } from 'electron';
 import { mocked } from 'jest-mock';
 
-import type Resources from '../../../resources/Resources';
-import lockWebContentsToFile from '../lockWebContentsToFile';
+import type Resources from '../../../resources/Resources.js';
+import lockWebContentsToFile from '../lockWebContentsToFile.js';
 
 type WillNavigateHandler = (event: Event, url: string) => void;
 
diff --git a/packages/main/src/infrastructure/electron/impl/electronShell.ts b/packages/main/src/infrastructure/electron/impl/electronShell.ts
index f7f7001..da246c0 100644
--- a/packages/main/src/infrastructure/electron/impl/electronShell.ts
+++ b/packages/main/src/infrastructure/electron/impl/electronShell.ts
@@ -23,7 +23,7 @@ import { writeFile } from 'node:fs/promises';
 import { app, dialog, shell } from 'electron';
 import { getLogger } from 'loglevel';
 
-import type MainEnv from '../../../stores/MainEnv';
+import type MainEnv from '../../../stores/MainEnv.js';
 
 const log = getLogger('ElectronShell');
 
diff --git a/packages/main/src/infrastructure/electron/impl/hardenSession.ts b/packages/main/src/infrastructure/electron/impl/hardenSession.ts
index fc358a1..0574146 100644
--- a/packages/main/src/infrastructure/electron/impl/hardenSession.ts
+++ b/packages/main/src/infrastructure/electron/impl/hardenSession.ts
@@ -22,8 +22,8 @@ import { URL } from 'node:url';
 
 import type { Session } from 'electron';
 
-import getLogger from '../../../utils/getLogger';
-import type Resources from '../../resources/Resources';
+import getLogger from '../../../utils/getLogger.js';
+import type Resources from '../../resources/Resources.js';
 
 /**
  * URL prefixes Sophie is allowed load in dev mode.
diff --git a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
index da40a56..338c845 100644
--- a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
+++ b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
@@ -20,9 +20,9 @@
 
 import type { WebContents } from 'electron';
 
-import getLogger from '../../../utils/getLogger';
-import isErrno from '../../../utils/isErrno';
-import type Resources from '../../resources/Resources';
+import getLogger from '../../../utils/getLogger.js';
+import isErrno from '../../../utils/isErrno.js';
+import type Resources from '../../resources/Resources.js';
 
 const log = getLogger('lockWebContentsToFile');
 
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
index 32b2d4d..7e45401 100644
--- a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -22,7 +22,7 @@ import { Menu, MenuItemConstructorOptions } from 'electron';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 
-import type MainStore from '../../../stores/MainStore';
+import type MainStore from '../../../stores/MainStore.js';
 
 export default function setApplicationMenu(
   store: MainStore,
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 92ca9ad..608a342 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type MainStore from '../../stores/MainStore';
-import type Profile from '../../stores/Profile';
-import type Service from '../../stores/Service';
+import type MainStore from '../../stores/MainStore.js';
+import type Profile from '../../stores/Profile.js';
+import type Service from '../../stores/Service.js';
 
 export interface ViewFactory {
   createMainWindow(store: MainStore): Promise<MainWindow>;
diff --git a/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts b/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
index 649536b..c7c6e22 100644
--- a/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
+++ b/packages/main/src/infrastructure/resources/impl/__tests__/getDistResources.test.ts
@@ -20,8 +20,8 @@
 
 import os from 'node:os';
 
-import Resources from '../../Resources';
-import getDistResources from '../getDistResources';
+import Resources from '../../Resources.js';
+import getDistResources from '../getDistResources.js';
 
 const defaultDevServerURL = 'http://localhost:3000/';
 
diff --git a/packages/main/src/infrastructure/resources/impl/getDistResources.ts b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
index 3c1ffb3..3b7827c 100644
--- a/packages/main/src/infrastructure/resources/impl/getDistResources.ts
+++ b/packages/main/src/infrastructure/resources/impl/getDistResources.ts
@@ -21,7 +21,7 @@
 import path from 'node:path';
 import { pathToFileURL, URL } from 'node:url';
 
-import Resources from '../Resources';
+import Resources from '../Resources.js';
 
 export default function getDistResources(
   devMode: boolean,
diff --git a/packages/main/src/initReactions.ts b/packages/main/src/initReactions.ts
index 05bc205..cbc0265 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -20,20 +20,20 @@
 
 import { app, session } from 'electron';
 
-import LocalizationFiles from './i18n/impl/LocaltizationFiles';
-import loadLocalization from './i18n/loadLocalization';
-import ConfigFile from './infrastructure/config/impl/ConfigFile';
-import UserAgents from './infrastructure/electron/UserAgents';
-import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory';
-import { installDevToolsExtensions } from './infrastructure/electron/impl/devTools';
-import hardenSession from './infrastructure/electron/impl/hardenSession';
-import setApplicationMenu from './infrastructure/electron/impl/setApplicationMenu';
-import getDistResources from './infrastructure/resources/impl/getDistResources';
-import loadServices from './reactions/loadServices';
-import synchronizeConfig from './reactions/synchronizeConfig';
-import synchronizeNativeTheme from './reactions/synchronizeNativeTheme';
-import type MainStore from './stores/MainStore';
-import type Disposer from './utils/Disposer';
+import LocalizationFiles from './i18n/impl/LocaltizationFiles.js';
+import loadLocalization from './i18n/loadLocalization.js';
+import ConfigFile from './infrastructure/config/impl/ConfigFile.js';
+import UserAgents from './infrastructure/electron/UserAgents.js';
+import ElectronViewFactory from './infrastructure/electron/impl/ElectronViewFactory.js';
+import { installDevToolsExtensions } from './infrastructure/electron/impl/devTools.js';
+import hardenSession from './infrastructure/electron/impl/hardenSession.js';
+import setApplicationMenu from './infrastructure/electron/impl/setApplicationMenu.js';
+import getDistResources from './infrastructure/resources/impl/getDistResources.js';
+import loadServices from './reactions/loadServices.js';
+import synchronizeConfig from './reactions/synchronizeConfig.js';
+import synchronizeNativeTheme from './reactions/synchronizeNativeTheme.js';
+import type MainStore from './stores/MainStore.js';
+import type Disposer from './utils/Disposer.js';
 
 export default async function initReactions(
   store: MainStore,
diff --git a/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts b/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
index f0e88c1..d4d8abf 100644
--- a/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
+++ b/packages/main/src/reactions/__tests__/synchronizeConfig.test.ts
@@ -21,10 +21,10 @@
 import { jest } from '@jest/globals';
 import { mocked } from 'jest-mock';
 
-import type ConfigRepository from '../../infrastructure/config/ConfigRepository';
-import SharedStore from '../../stores/SharedStore';
-import type Disposer from '../../utils/Disposer';
-import synchronizeConfig, { serializeConfig } from '../synchronizeConfig';
+import type ConfigRepository from '../../infrastructure/config/ConfigRepository.js';
+import SharedStore from '../../stores/SharedStore.js';
+import type Disposer from '../../utils/Disposer.js';
+import synchronizeConfig, { serializeConfig } from '../synchronizeConfig.js';
 
 let store: SharedStore;
 const repository: ConfigRepository = {
diff --git a/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts b/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
index 05f14fb..c89f989 100644
--- a/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
+++ b/packages/main/src/reactions/__tests__/synchronizeNativeTheme.test.ts
@@ -21,8 +21,8 @@
 import { jest } from '@jest/globals';
 import { mocked } from 'jest-mock';
 
-import SharedStore from '../../stores/SharedStore';
-import type Disposer from '../../utils/Disposer';
+import SharedStore from '../../stores/SharedStore.js';
+import type Disposer from '../../utils/Disposer.js';
 
 let shouldUseDarkColors = false;
 
@@ -39,7 +39,7 @@ jest.unstable_mockModule('electron', () => ({
 
 const { nativeTheme } = await import('electron');
 const { default: synchronizeNativeTheme } = await import(
-  '../synchronizeNativeTheme'
+  '../synchronizeNativeTheme.js'
 );
 
 let store: SharedStore;
diff --git a/packages/main/src/reactions/loadServices.ts b/packages/main/src/reactions/loadServices.ts
index 50fd2cb..1325a36 100644
--- a/packages/main/src/reactions/loadServices.ts
+++ b/packages/main/src/reactions/loadServices.ts
@@ -26,10 +26,10 @@ import type {
   Partition,
   ServiceView,
   ViewFactory,
-} from '../infrastructure/electron/types';
-import type MainStore from '../stores/MainStore';
-import type Service from '../stores/Service';
-import getLogger from '../utils/getLogger';
+} from '../infrastructure/electron/types.js';
+import type MainStore from '../stores/MainStore.js';
+import type Service from '../stores/Service.js';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('loadServices');
 
diff --git a/packages/main/src/reactions/synchronizeConfig.ts b/packages/main/src/reactions/synchronizeConfig.ts
index 5fe924a..f3c8b4a 100644
--- a/packages/main/src/reactions/synchronizeConfig.ts
+++ b/packages/main/src/reactions/synchronizeConfig.ts
@@ -21,11 +21,11 @@
 import { debounce } from 'lodash-es';
 import { reaction } from 'mobx';
 
-import type ConfigRepository from '../infrastructure/config/ConfigRepository';
-import type SharedStore from '../stores/SharedStore';
-import type Config from '../stores/config/Config';
-import type Disposer from '../utils/Disposer';
-import getLogger from '../utils/getLogger';
+import type ConfigRepository from '../infrastructure/config/ConfigRepository.js';
+import type SharedStore from '../stores/SharedStore.js';
+import type Config from '../stores/config/Config.js';
+import type Disposer from '../utils/Disposer.js';
+import getLogger from '../utils/getLogger.js';
 
 const DEFAULT_CONFIG_DEBOUNCE_TIME_MS = 1000;
 
diff --git a/packages/main/src/reactions/synchronizeNativeTheme.ts b/packages/main/src/reactions/synchronizeNativeTheme.ts
index 384d54d..10d5f69 100644
--- a/packages/main/src/reactions/synchronizeNativeTheme.ts
+++ b/packages/main/src/reactions/synchronizeNativeTheme.ts
@@ -21,9 +21,9 @@
 import { nativeTheme } from 'electron';
 import { autorun } from 'mobx';
 
-import type SharedStore from '../stores/SharedStore';
-import type Disposer from '../utils/Disposer';
-import getLogger from '../utils/getLogger';
+import type SharedStore from '../stores/SharedStore.js';
+import type Disposer from '../utils/Disposer.js';
+import getLogger from '../utils/getLogger.js';
 
 const log = getLogger('synchronizeNativeTheme');
 
diff --git a/packages/main/src/stores/GlobalSettings.ts b/packages/main/src/stores/GlobalSettings.ts
index 84248ea..9ebc1b1 100644
--- a/packages/main/src/stores/GlobalSettings.ts
+++ b/packages/main/src/stores/GlobalSettings.ts
@@ -21,9 +21,9 @@
 import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
 import { Instance, resolveIdentifier } from 'mobx-state-tree';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import Service from './Service';
+import Service from './Service.js';
 
 const log = getLogger('sharedStore');
 
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index b3e2830..1abd20c 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -22,16 +22,16 @@ import type { Action } from '@sophie/shared';
 import type { ResourceKey } from 'i18next';
 import { flow, Instance, types } from 'mobx-state-tree';
 
-import type I18nStore from '../i18n/I18nStore';
-import type { UseTranslationResult } from '../i18n/I18nStore';
-import type { MainWindow } from '../infrastructure/electron/types';
-import getLogger from '../utils/getLogger';
+import type I18nStore from '../i18n/I18nStore.js';
+import type { UseTranslationResult } from '../i18n/I18nStore.js';
+import type { MainWindow } from '../infrastructure/electron/types.js';
+import getLogger from '../utils/getLogger.js';
 
-import GlobalSettings from './GlobalSettings';
-import { getEnv } from './MainEnv';
-import Profile from './Profile';
-import Service from './Service';
-import SharedStore from './SharedStore';
+import GlobalSettings from './GlobalSettings.js';
+import { getEnv } from './MainEnv.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
+import SharedStore from './SharedStore.js';
 
 const log = getLogger('MainStore');
 
diff --git a/packages/main/src/stores/Profile.ts b/packages/main/src/stores/Profile.ts
index 405a5d4..b4343a0 100644
--- a/packages/main/src/stores/Profile.ts
+++ b/packages/main/src/stores/Profile.ts
@@ -21,7 +21,7 @@
 import { Certificate, Profile as ProfileBase } from '@sophie/shared';
 import { clone, getSnapshot, Instance } from 'mobx-state-tree';
 
-import type ProfileConfig from './config/ProfileConfig';
+import type ProfileConfig from './config/ProfileConfig.js';
 
 const Profile = ProfileBase.views((self) => ({
   get config(): ProfileConfig {
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index 9256f65..3b7d0b2 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -29,12 +29,12 @@ import {
 } from '@sophie/shared';
 import { type Instance, getSnapshot, cast, flow } from 'mobx-state-tree';
 
-import type { ServiceView } from '../infrastructure/electron/types';
-import getLogger from '../utils/getLogger';
+import type { ServiceView } from '../infrastructure/electron/types.js';
+import getLogger from '../utils/getLogger.js';
 
-import { getEnv } from './MainEnv';
-import ServiceSettings from './ServiceSettings';
-import type ServiceConfig from './config/ServiceConfig';
+import { getEnv } from './MainEnv.js';
+import ServiceSettings from './ServiceSettings.js';
+import type ServiceConfig from './config/ServiceConfig.js';
 
 const log = getLogger('Service');
 
diff --git a/packages/main/src/stores/ServiceSettings.ts b/packages/main/src/stores/ServiceSettings.ts
index 5d37347..d5c2843 100644
--- a/packages/main/src/stores/ServiceSettings.ts
+++ b/packages/main/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/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
index f93c3d4..e1c2d3c 100644
--- a/packages/main/src/stores/SharedStore.ts
+++ b/packages/main/src/stores/SharedStore.ts
@@ -21,13 +21,13 @@
 import { defineSharedStoreModel, WritingDirection } from '@sophie/shared';
 import { getSnapshot, Instance } from 'mobx-state-tree';
 
-import getLogger from '../utils/getLogger';
+import getLogger from '../utils/getLogger.js';
 
-import GlobalSettings from './GlobalSettings';
-import Profile from './Profile';
-import Service from './Service';
-import type Config from './config/Config';
-import loadConfig from './config/loadConfig';
+import GlobalSettings from './GlobalSettings.js';
+import Profile from './Profile.js';
+import Service from './Service.js';
+import type Config from './config/Config.js';
+import loadConfig from './config/loadConfig.js';
 
 const log = getLogger('SharedStore');
 
diff --git a/packages/main/src/stores/__tests__/SharedStore.test.ts b/packages/main/src/stores/__tests__/SharedStore.test.ts
index 0ed63e3..78396da 100644
--- a/packages/main/src/stores/__tests__/SharedStore.test.ts
+++ b/packages/main/src/stores/__tests__/SharedStore.test.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import SharedStore from '../SharedStore';
-import type Config from '../config/Config';
-import type ProfileConfig from '../config/ProfileConfig';
-import type ServiceConfig from '../config/ServiceConfig';
+import SharedStore from '../SharedStore.js';
+import type Config from '../config/Config.js';
+import type ProfileConfig from '../config/ProfileConfig.js';
+import type ServiceConfig from '../config/ServiceConfig.js';
 
 const profileProps: ProfileConfig = {
   name: 'Test profile',
diff --git a/packages/main/src/stores/config/Config.ts b/packages/main/src/stores/config/Config.ts
index c38e3c5..adb10a6 100644
--- a/packages/main/src/stores/config/Config.ts
+++ b/packages/main/src/stores/config/Config.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { GlobalSettingsSnapshotIn } from '../GlobalSettings';
+import type { GlobalSettingsSnapshotIn } from '../GlobalSettings.js';
 
-import type ProfileConfig from './ProfileConfig';
-import type ServiceConfig from './ServiceConfig';
+import type ProfileConfig from './ProfileConfig.js';
+import type ServiceConfig from './ServiceConfig.js';
 
 export default interface Config extends GlobalSettingsSnapshotIn {
   profiles?: ProfileConfig[] | undefined;
diff --git a/packages/main/src/stores/config/loadConfig.ts b/packages/main/src/stores/config/loadConfig.ts
index 2463084..8a1adcb 100644
--- a/packages/main/src/stores/config/loadConfig.ts
+++ b/packages/main/src/stores/config/loadConfig.ts
@@ -30,14 +30,14 @@ import {
 import { nanoid } from 'nanoid';
 import slug from 'slug';
 
-import GlobalSettings from '../GlobalSettings';
-import type Profile from '../Profile';
-import type Service from '../Service';
-import type { ServiceSettingsSnapshotIn } from '../ServiceSettings';
+import GlobalSettings from '../GlobalSettings.js';
+import type Profile from '../Profile.js';
+import type Service from '../Service.js';
+import type { ServiceSettingsSnapshotIn } from '../ServiceSettings.js';
 
-import type Config from './Config';
-import type ProfileConfig from './ProfileConfig';
-import type ServiceConfig from './ServiceConfig';
+import type Config from './Config.js';
+import type ProfileConfig from './ProfileConfig.js';
+import type ServiceConfig from './ServiceConfig.js';
 
 function generateId(name?: string | undefined): string {
   const nameSlug = typeof name === 'undefined' ? '' : slug(name);
diff --git a/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts b/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
index 21620ed..b6af137 100644
--- a/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
+++ b/packages/preload/src/contextBridge/__tests__/createSophieRenderer.test.ts
@@ -41,7 +41,7 @@ jest.unstable_mockModule('electron', () => ({
 const { ipcRenderer } = await import('electron');
 
 const { default: createSophieRenderer } = await import(
-  '../createSophieRenderer'
+  '../createSophieRenderer.js'
 );
 
 const event: Electron.IpcRendererEvent =
diff --git a/packages/preload/src/contextBridge/createSophieRenderer.ts b/packages/preload/src/contextBridge/createSophieRenderer.ts
index 3de9d9e..a05efd0 100644
--- a/packages/preload/src/contextBridge/createSophieRenderer.ts
+++ b/packages/preload/src/contextBridge/createSophieRenderer.ts
@@ -20,8 +20,12 @@
 
 import { SophieRenderer } from '@sophie/shared';
 
-import SharedStoreConnector, { dispatchAction } from './SharedStoreConnector';
-import TranslationsConnector, { getTranslation } from './TranslationsConnector';
+import SharedStoreConnector, {
+  dispatchAction,
+} from './SharedStoreConnector.js';
+import TranslationsConnector, {
+  getTranslation,
+} from './TranslationsConnector.js';
 
 export default function createSophieRenderer(devMode: boolean): SophieRenderer {
   const sharedStoreConnector = new SharedStoreConnector(devMode);
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
index f13220c..3ad6fee 100644
--- a/packages/preload/src/index.ts
+++ b/packages/preload/src/index.ts
@@ -20,7 +20,7 @@
 
 import { contextBridge } from 'electron';
 
-import createSophieRenderer from './contextBridge/createSophieRenderer';
+import createSophieRenderer from './contextBridge/createSophieRenderer.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
diff --git a/packages/preload/tsconfig.json b/packages/preload/tsconfig.json
index 18c72b4..80ff957 100644
--- a/packages/preload/tsconfig.json
+++ b/packages/preload/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2021"],
     "types": ["@types/jest"]
   },
   "references": [
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,
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
index 4fe3896..3b576a8 100644
--- a/packages/renderer/tsconfig.json
+++ b/packages/renderer/tsconfig.json
@@ -2,8 +2,10 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
+    "module": "es2022",
+    "moduleResolution": "node",
     "jsx": "react",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2021"],
     "types": ["@types/jest", "vite/client"]
   },
   "references": [
diff --git a/packages/service-inject/tsconfig.json b/packages/service-inject/tsconfig.json
index 33ce1de..126bce4 100644
--- a/packages/service-inject/tsconfig.json
+++ b/packages/service-inject/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"]
+    "lib": ["dom", "dom.iterable", "es2021"]
   },
   "references": [
     {
diff --git a/packages/service-preload/tsconfig.json b/packages/service-preload/tsconfig.json
index d7fb8cb..a3ba1bc 100644
--- a/packages/service-preload/tsconfig.json
+++ b/packages/service-preload/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"]
+    "lib": ["dom", "dom.iterable", "es2021"]
   },
   "references": [
     {
diff --git a/packages/service-shared/package.json b/packages/service-shared/package.json
index 57a2297..3940cf5 100644
--- a/packages/service-shared/package.json
+++ b/packages/service-shared/package.json
@@ -4,7 +4,12 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "exports": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck:workspace": "yarn g:typecheck",
diff --git a/packages/service-shared/src/index.ts b/packages/service-shared/src/index.ts
index 5165fe5..c415e45 100644
--- a/packages/service-shared/src/index.ts
+++ b/packages/service-shared/src/index.ts
@@ -18,6 +18,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export { MainToServiceIpcMessage, ServiceToMainIpcMessage } from './ipc';
+export { MainToServiceIpcMessage, ServiceToMainIpcMessage } from './ipc.js';
 
-export { UnreadCount } from './schemas';
+export { UnreadCount } from './schemas.js';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 2498797..6078902 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -4,7 +4,12 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "exports": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck:workspace": "yarn g:typecheck",
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index 732f941..7b934e5 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -20,9 +20,9 @@
 
 import type { ResourceKey } from 'i18next';
 
-import { Action } from '../schemas/Action';
-import { Translation } from '../schemas/Translation';
-import { SharedStoreListener } from '../stores/SharedStoreBase';
+import { Action } from '../schemas/Action.js';
+import { Translation } from '../schemas/Translation.js';
+import { SharedStoreListener } from '../stores/SharedStoreBase.js';
 
 export default interface SophieRenderer {
   onSharedStoreChange(this: void, listener: SharedStoreListener): Promise<void>;
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index b1d05f8..2e06234 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -18,71 +18,71 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export type { default as SophieRenderer } from './contextBridge/SophieRenderer';
+export type { default as SophieRenderer } from './contextBridge/SophieRenderer.js';
 
-export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc';
+export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc.js';
 
-export { Action } from './schemas/Action';
+export { Action } from './schemas/Action.js';
 
-export { BrowserViewBounds } from './schemas/BrowserViewBounds';
+export { BrowserViewBounds } from './schemas/BrowserViewBounds.js';
 
-export { ServiceAction } from './schemas/ServiceAction';
+export { ServiceAction } from './schemas/ServiceAction.js';
 
-export { ThemeSource } from './schemas/ThemeSource';
+export { ThemeSource } from './schemas/ThemeSource.js';
 
-export { Translation } from './schemas/Translation';
+export { Translation } from './schemas/Translation.js';
 
 export type {
   CertificatePrincipal,
   CertificateSnapshotIn,
-} from './stores/Certificate';
-export { default as Certificate } from './stores/Certificate';
+} from './stores/Certificate.js';
+export { default as Certificate } from './stores/Certificate.js';
 
 export type {
   GlobalSettingsSnapshotIn,
   GlobalSettingsSnapshotOut,
-} from './stores/GlobalSettingsBase';
+} from './stores/GlobalSettingsBase.js';
 export {
   default as GlobalSettingsBase,
   defineGlobalSettingsModel,
   SYSTEM_LOCALE,
-} from './stores/GlobalSettingsBase';
+} from './stores/GlobalSettingsBase.js';
 
-export { default as Profile } from './stores/Profile';
+export { default as Profile } from './stores/Profile.js';
 
 export type {
   ProfileSettingsSnapshotIn,
   ProfileSettingsSnapshotOut,
-} from './stores/ProfileSettings';
-export { default as ProfileSettings } from './stores/ProfileSettings';
+} from './stores/ProfileSettings.js';
+export { default as ProfileSettings } from './stores/ProfileSettings.js';
 
 export {
   default as ServiceBase,
   defineServiceModel,
   SecurityLabelKind,
-} from './stores/ServiceBase';
+} from './stores/ServiceBase.js';
 
 export type {
   ServiceSettingsSnapshotIn,
   ServiceSettingsSnapshotOut,
-} from './stores/ServiceSettingsBase';
+} from './stores/ServiceSettingsBase.js';
 export {
   default as ServiceSettingsBase,
   defineServiceSettingsModel,
-} from './stores/ServiceSettingsBase';
+} from './stores/ServiceSettingsBase.js';
 
-export type { ServiceStateSnapshotIn } from './stores/ServiceState';
-export { default as ServiceState } from './stores/ServiceState';
+export type { ServiceStateSnapshotIn } from './stores/ServiceState.js';
+export { default as ServiceState } from './stores/ServiceState.js';
 
 export type {
   SharedStoreListener,
   SharedStoreSnapshotIn,
   SharedStoreSnapshotOut,
-} from './stores/SharedStoreBase';
+} from './stores/SharedStoreBase.js';
 export {
   default as SharedStoreBase,
   defineSharedStoreModel,
   FALLBACK_LOCALE,
-} from './stores/SharedStoreBase';
+} from './stores/SharedStoreBase.js';
 
-export { default as WritingDirection } from './stores/WritingDirection';
+export { default as WritingDirection } from './stores/WritingDirection.js';
diff --git a/packages/shared/src/schemas/Action.ts b/packages/shared/src/schemas/Action.ts
index 7ece27a..11d63aa 100644
--- a/packages/shared/src/schemas/Action.ts
+++ b/packages/shared/src/schemas/Action.ts
@@ -20,8 +20,8 @@
 
 import { z } from 'zod';
 
-import { ServiceAction } from './ServiceAction';
-import { ThemeSource } from './ThemeSource';
+import { ServiceAction } from './ServiceAction.js';
+import { ThemeSource } from './ThemeSource.js';
 
 export const Action = /* @__PURE__ */ (() =>
   z.union([
diff --git a/packages/shared/src/schemas/ServiceAction.ts b/packages/shared/src/schemas/ServiceAction.ts
index 9486aaf..744c7cf 100644
--- a/packages/shared/src/schemas/ServiceAction.ts
+++ b/packages/shared/src/schemas/ServiceAction.ts
@@ -20,7 +20,7 @@
 
 import { z } from 'zod';
 
-import { BrowserViewBounds } from './BrowserViewBounds';
+import { BrowserViewBounds } from './BrowserViewBounds.js';
 
 export const ServiceAction = /* @__PURE__ */ (() =>
   z.union([
diff --git a/packages/shared/src/stores/GlobalSettingsBase.ts b/packages/shared/src/stores/GlobalSettingsBase.ts
index c74c822..9d677c4 100644
--- a/packages/shared/src/stores/GlobalSettingsBase.ts
+++ b/packages/shared/src/stores/GlobalSettingsBase.ts
@@ -26,9 +26,9 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import { ThemeSource } from '../schemas/ThemeSource';
+import { ThemeSource } from '../schemas/ThemeSource.js';
 
-import ServiceBase from './ServiceBase';
+import ServiceBase from './ServiceBase.js';
 
 export const SYSTEM_LOCALE = 'system';
 
diff --git a/packages/shared/src/stores/Profile.ts b/packages/shared/src/stores/Profile.ts
index 611ca6f..076c639 100644
--- a/packages/shared/src/stores/Profile.ts
+++ b/packages/shared/src/stores/Profile.ts
@@ -20,8 +20,8 @@
 
 import { Instance, types } from 'mobx-state-tree';
 
-import Certificate, { CertificateSnapshotIn } from './Certificate';
-import ProfileSettings from './ProfileSettings';
+import Certificate, { CertificateSnapshotIn } from './Certificate.js';
+import ProfileSettings from './ProfileSettings.js';
 
 const Profile = /* @__PURE__ */ (() =>
   types
diff --git a/packages/shared/src/stores/ServiceBase.ts b/packages/shared/src/stores/ServiceBase.ts
index 0e4be97..7bd1d68 100644
--- a/packages/shared/src/stores/ServiceBase.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -20,10 +20,10 @@
 
 import { IAnyModelType, Instance, types } from 'mobx-state-tree';
 
-import type { CertificateSnapshotIn } from './Certificate';
-import type Profile from './Profile';
-import ServiceSettingsBase from './ServiceSettingsBase';
-import ServiceState from './ServiceState';
+import type { CertificateSnapshotIn } from './Certificate.js';
+import type Profile from './Profile.js';
+import ServiceSettingsBase from './ServiceSettingsBase.js';
+import ServiceState from './ServiceState.js';
 
 export enum SecurityLabelKind {
   Empty = 'empty',
diff --git a/packages/shared/src/stores/ServiceSettingsBase.ts b/packages/shared/src/stores/ServiceSettingsBase.ts
index 45eb15d..b9df516 100644
--- a/packages/shared/src/stores/ServiceSettingsBase.ts
+++ b/packages/shared/src/stores/ServiceSettingsBase.ts
@@ -26,7 +26,7 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import ProfileBase from './Profile';
+import ProfileBase from './Profile.js';
 
 export function defineServiceSettingsModel<TP extends IAnyModelType>(
   profile: TP,
diff --git a/packages/shared/src/stores/ServiceState.ts b/packages/shared/src/stores/ServiceState.ts
index ad49321..d311a70 100644
--- a/packages/shared/src/stores/ServiceState.ts
+++ b/packages/shared/src/stores/ServiceState.ts
@@ -20,7 +20,7 @@
 
 import { Instance, SnapshotIn, types } from 'mobx-state-tree';
 
-import Certificate from './Certificate';
+import Certificate from './Certificate.js';
 
 const ServiceState = /* @__PURE__ */ (() =>
   types.optional(
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index 949ef6a..4526c95 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -27,10 +27,10 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import GlobalSettingsBase from './GlobalSettingsBase';
-import ProfileBase from './Profile';
-import ServiceBase from './ServiceBase';
-import WritingDirection from './WritingDirection';
+import GlobalSettingsBase from './GlobalSettingsBase.js';
+import ProfileBase from './Profile.js';
+import ServiceBase from './ServiceBase.js';
+import WritingDirection from './WritingDirection.js';
 
 export const FALLBACK_LOCALE = 'en';
 
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
index c4db5b0..52ac98d 100644
--- a/packages/test-utils/src/index.ts
+++ b/packages/test-utils/src/index.ts
@@ -22,4 +22,4 @@
   eslint-disable-next-line import/prefer-default-export --
   Keep API consistent for more helpers in the future.
 */
-export { default as fake } from './fake';
+export { default as fake } from './fake.js';