Migrate from CJS to ESM

desktop/eslint.config.mjs

@@ -97,7 +97,7 @@ export default tseslint.config(
     },
   },
   {
-    files: ['**/*.{js,mjs,ts,tsx}'],
+    files: ['**/*.{js,cjs,mjs,ts,tsx}'],
     plugins: {
       'simple-import-sort': simpleImportSort,
     },

desktop/package.json

@@ -28,7 +28,6 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "prettier": "^3.3.3",
-    "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.15.0"
   },

desktop/packages/mullvad-vpn/package.json

@@ -9,6 +9,7 @@
     "name": "Mullvad VPN",
     "email": "[email protected]"
   },
+  "type": "module",
   "repository": "https://github.com/mullvad/mullvadvpn-app",
   "license": "GPL-3.0",
   "dependencies": {
@@ -25,7 +26,7 @@
     "react-dom": "^19.1.1",
     "react-redux": "^9.2.0",
     "react-router": "^5.3.4",
-    "redux": "^4.2.0",
+    "redux": "^5.0.1",
     "simple-plist": "^1.3.1",
     "sprintf-js": "^1.1.2",
     "styled-components": "^6.1.19",
@@ -42,7 +43,7 @@
     "@types/react-router": "^5.1.19",
     "@types/sprintf-js": "^1.1.2",
     "@types/topojson-specification": "^1.0.2",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.2",
     "cross-env": "^7.0.3",
     "electron": "39.2.6",
     "electron-builder": "26.6.0",
@@ -69,10 +70,10 @@
   },
   "scripts": {
     "preinstall": "test -d node_modules || mkdir node_modules",
-    "build": "node tasks/build-production.js",
+    "build": "node tasks/build-production.cjs",
     "build:vite": "vite build",
-    "build:test": "node tasks/build-test.js",
-    "build:standalone": "node tasks/build-standalone.js",
+    "build:test": "node tasks/build-test.cjs",
+    "build:standalone": "node tasks/build-standalone.cjs",
     "pack-test-executable": "./scripts/build-test-executable.sh",
     "build-test-executable": "npm run pack-test-executable",
     "lint": "eslint . --max-warnings 0",
@@ -83,14 +84,14 @@
     "e2e:sequential:no-build": "xvfb-maybe -- playwright test -c test/e2e/installed/playwright.config.ts --workers 1",
     "e2e:update-snapshots": "npm run e2e:no-build -- --update-snapshots",
     "develop": "npm run develop:pre && npm run develop:vite",
-    "develop:pre": "node tasks/pre-develop.js",
+    "develop:pre": "node tasks/pre-develop.cjs",
     "develop:vite": "vite",
     "test": "cross-env NODE_ENV=test vitest test/unit",
     "type-check": "tsc --noEmit",
-    "update-translations": "node scripts/extract-translations",
-    "pack:mac": "node tasks/pack-mac.js",
-    "pack:win": "node tasks/pack-windows.js",
-    "pack:linux": "node tasks/pack-linux.js"
+    "update-translations": "node scripts/extract-translations.cjs",
+    "pack:mac": "node tasks/pack-mac.cjs",
+    "pack:win": "node tasks/pack-windows.cjs",
+    "pack:linux": "node tasks/pack-linux.cjs"
   },
   "volta": {
     "extends": "../../package.json"

desktop/packages/mullvad-vpn/scripts/verify-translations-format.ts

@@ -1,14 +1,16 @@
 import fs from 'fs';
-import { GetTextTranslation, po } from 'gettext-parser';
+import { type GetTextTranslation, po } from 'gettext-parser';
 import path from 'path';
 
-import { ALLOWED_TAGS } from '../src/renderer/lib/html-formatter';
-import { ValueOfArray } from '../src/shared/utility-types';
+import {
+  type AllowedTag,
+  type AllowedVoidTag,
+  translations,
+} from '../src/shared/constants/translations.ts';
+const { allowedTags, allowedVoidTags } = translations;
 
 const LOCALES_DIR = path.join('locales');
 
-const ALLOWED_VOID_TAGS = ['br'];
-
 // Make sure to report these strings to crowdin. View this as a temporary escape
 // hatch, not a permanent solution.
 const IGNORED_STRINGS: Set<string> = new Set([
@@ -71,8 +73,12 @@ function checkFormatSpecifiers(translation: GetTextTranslation): boolean {
     .every((result) => result);
 }
 
-function isAllowedTag(tag: string): tag is ValueOfArray<typeof ALLOWED_TAGS> {
-  return ALLOWED_TAGS.some((allowedTag) => tag === allowedTag);
+function isAllowedTag(tag: string): tag is AllowedTag {
+  return allowedTags.some((allowedTag) => tag === allowedTag);
+}
+
+function isAllowedVoidTag(tag: string): tag is AllowedVoidTag {
+  return allowedVoidTags.some((allowedTag) => tag === allowedTag);
 }
 
 function checkHtmlTagsImpl(value: string): { correct: boolean; amount: number } {
@@ -93,7 +99,7 @@ function checkHtmlTagsImpl(value: string): { correct: boolean; amount: number }
       return { correct: false, amount: NaN };
     }
 
-    if (!ALLOWED_VOID_TAGS.includes(tag)) {
+    if (!isAllowedVoidTag(tag)) {
       if (endTag) {
         // End tags require a matching start tag.
         if (tag !== tagStack.pop()) {

desktop/packages/mullvad-vpn/src/main/changelog.ts

@@ -7,7 +7,7 @@ import log from '../shared/logging';
 // Reads and parses the changelog file.
 export function readChangelog(): IChangelog {
   try {
-    const changelogPath = path.join(__dirname, '..', 'changes.txt');
+    const changelogPath = path.join(import.meta.dirname, '..', 'changes.txt');
     const contents = fs.readFileSync(changelogPath).toString();
     return parseChangelog(contents);
   } catch (e) {

desktop/packages/mullvad-vpn/src/main/index.ts

@@ -79,7 +79,7 @@ const ALLOWED_PERMISSIONS = ['clipboard-sanitized-write'];
 const SANDBOX_DISABLED = app.commandLine.hasSwitch('no-sandbox');
 const UPDATE_NOTIFICATION_DISABLED = process.env.MULLVAD_DISABLE_UPDATE_NOTIFICATION === '1';
 
-const GEO_DIR = path.resolve(__dirname, 'assets/geo');
+const GEO_DIR = path.resolve(import.meta.dirname, 'assets/geo');
 
 class ApplicationMain
   implements
@@ -1018,7 +1018,7 @@ class ApplicationMain
   }
 
   private allowFileAccess(url: string): boolean {
-    const buildDir = path.normalize(path.join(path.resolve(__dirname), '..', '..'));
+    const buildDir = path.normalize(path.join(path.resolve(import.meta.dirname), '..', '..'));
 
     if (url.startsWith('file:')) {
       // Extract the path from the URL

desktop/packages/mullvad-vpn/src/main/load-translations.ts

@@ -6,7 +6,7 @@ import path from 'path';
 import log from '../shared/logging';
 
 const SOURCE_LANGUAGE = 'en';
-const LOCALES_DIR = path.resolve(__dirname, 'locales');
+const LOCALES_DIR = path.resolve(import.meta.dirname, 'locales');
 
 export function loadTranslations(
   currentLocale: string,

desktop/packages/mullvad-vpn/src/main/notification-controller.ts

@@ -76,7 +76,7 @@ export default class NotificationController {
     }
 
     if (usePngIcon) {
-      const imagePath = path.join(__dirname, 'assets/images/icon-notification.png');
+      const imagePath = path.join(import.meta.dirname, 'assets/images/icon-notification.png');
       // `nativeImage` is undefined when running tests
       this.notificationIcon = nativeImage?.createFromPath(imagePath);
     }

desktop/packages/mullvad-vpn/src/main/proc.ts

@@ -7,7 +7,8 @@ export function resolveBin(binaryName: string) {
 function getBasePath(): string {
   if (process.env.NODE_ENV === 'development') {
     return (
-      process.env.MULLVAD_PATH || path.resolve(path.join(__dirname, '../../../../target/debug'))
+      process.env.MULLVAD_PATH ||
+      path.resolve(path.join(import.meta.dirname, '../../../../target/debug'))
     );
   } else {
     return process.resourcesPath;

desktop/packages/mullvad-vpn/src/main/tray-icon.ts

@@ -5,7 +5,7 @@ export class TrayIcon {
   constructor(public fileName?: string) {}
 
   public get basePath() {
-    const basePath = path.resolve(__dirname, 'assets/images/menubar-icons');
+    const basePath = path.resolve(import.meta.dirname, 'assets/images/menubar-icons');
 
     return basePath;
   }

desktop/packages/mullvad-vpn/src/main/user-interface.ts

@@ -199,7 +199,7 @@ export default class UserInterface implements WindowControllerDelegate {
       if (process.env.NODE_ENV === 'development' && process.env.VITE_DEV_SERVER_URL) {
         await window.loadURL(process.env.VITE_DEV_SERVER_URL);
       } else {
-        await window.loadFile(path.join(__dirname, 'index.html'));
+        await window.loadFile(path.join(import.meta.dirname, 'index.html'));
       }
     } catch (e) {
       const error = e as Error;
@@ -285,7 +285,7 @@ export default class UserInterface implements WindowControllerDelegate {
       show: false,
       frame: unpinnedWindow,
       webPreferences: {
-        preload: path.join(__dirname, 'preload.js'),
+        preload: path.join(import.meta.dirname, 'preload.js'),
         nodeIntegration: false,
         nodeIntegrationInWorker: false,
         nodeIntegrationInSubFrames: false,

desktop/packages/mullvad-vpn/src/renderer/lib/html-formatter.tsx

@@ -1,17 +1,14 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
 
-import { type ValueOfArray } from '../../shared/utility-types';
+import type { AllowedTag } from '../../shared/constants';
 import { colors } from './foundations';
 
 const Bold = styled.span({ fontWeight: 700 });
 const Emphasis = styled.em({ color: colors.white, fontWeight: 600 });
 
-export const ALLOWED_TAGS = ['b', 'br', 'em', 'a'] as const;
-export type AllowedTags = ValueOfArray<typeof ALLOWED_TAGS>;
-
 export type Transformer = (value: string) => React.ReactElement;
-export type TransformerMap = Record<AllowedTags, Transformer>;
+export type TransformerMap = Record<AllowedTag, Transformer>;
 
 const defaultTransformers: Partial<TransformerMap> = {
   b: (value) => <Bold>{value}</Bold>,

desktop/packages/mullvad-vpn/src/renderer/redux/store.ts

@@ -55,7 +55,7 @@ export default function configureStore() {
 
   const rootReducer = combineReducers(reducers);
 
-  return createStore(rootReducer, composeEnhancers());
+  return createStore(rootReducer, {}, composeEnhancers());
 }
 
 function composeEnhancers(): StoreEnhancer {

desktop/packages/mullvad-vpn/src/shared/constants/index.ts

@@ -1,2 +1,3 @@
-export * from './urls';
 export * from './strings';
+export * from './translations';
+export * from './urls';

desktop/packages/mullvad-vpn/src/shared/constants/translations.ts

@@ -0,0 +1,9 @@
+import type { ValueOfArray } from '../utility-types';
+
+export const translations = {
+  allowedTags: ['b', 'br', 'em', 'a'],
+  allowedVoidTags: ['br'],
+} as const;
+
+export type AllowedTag = ValueOfArray<typeof translations.allowedTags>;
+export type AllowedVoidTag = ValueOfArray<typeof translations.allowedVoidTags>;

desktop/packages/mullvad-vpn/tasks/build-production.js → desktop/packages/mullvad-vpn/tasks/build-production.cjs

@@ -1,5 +1,5 @@
-const { build } = require('./build');
-const { setNodeEnvironment } = require('./utils');
+const { build } = require('./build.cjs');
+const { setNodeEnvironment } = require('./utils.cjs');
 
 async function buildProduction() {
   setNodeEnvironment('production');

desktop/packages/mullvad-vpn/tasks/build-standalone.js → desktop/packages/mullvad-vpn/tasks/build-standalone.cjs

@@ -1,5 +1,5 @@
-const { BUILD_STANDALONE_DIR } = require('./constants');
-const { removeRecursively, runCommand, setNodeEnvironment } = require('./utils');
+const { BUILD_STANDALONE_DIR } = require('./constants.cjs');
+const { removeRecursively, runCommand, setNodeEnvironment } = require('./utils.cjs');
 
 async function transpileBuildStandalone() {
   await runCommand('npx tsc -p tsconfig.standalone.json');

desktop/packages/mullvad-vpn/tasks/build-test.cjs

@@ -0,0 +1,9 @@
+const { build } = require('./build.cjs');
+const { setNodeEnvironment } = require('./utils.cjs');
+
+async function buildTest() {
+  setNodeEnvironment('test');
+  await build();
+}
+
+buildTest();

desktop/packages/mullvad-vpn/tasks/build.js → desktop/packages/mullvad-vpn/tasks/build.cjs

@@ -1,5 +1,5 @@
-const { copyAssetsToBuildDirectory, removeRecursively, runNpmScript } = require('./utils');
-const { BUILD_DIR } = require('./constants');
+const { copyAssetsToBuildDirectory, removeRecursively, runNpmScript } = require('./utils.cjs');
+const { BUILD_DIR } = require('./constants.cjs');
 
 async function build() {
   await removeRecursively(BUILD_DIR);

desktop/packages/mullvad-vpn/tasks/pack-linux.js → desktop/packages/mullvad-vpn/tasks/pack-linux.cjs

@@ -1,5 +1,5 @@
-const { build } = require('./build');
-const { packLinux } = require('./distribution');
+const { build } = require('./build.cjs');
+const { packLinux } = require('./distribution.cjs');
 
 async function buildAndPackage() {
   await build();

desktop/packages/mullvad-vpn/tasks/pack-mac.js → desktop/packages/mullvad-vpn/tasks/pack-mac.cjs

@@ -1,5 +1,5 @@
-const { build } = require('./build');
-const { packMac } = require('./distribution');
+const { build } = require('./build.cjs');
+const { packMac } = require('./distribution.cjs');
 
 async function buildAndPackage() {
   await build();

desktop/packages/mullvad-vpn/tasks/pack-windows.js → desktop/packages/mullvad-vpn/tasks/pack-windows.cjs

@@ -1,5 +1,5 @@
-const { build } = require('./build');
-const { packWin } = require('./distribution');
+const { build } = require('./build.cjs');
+const { packWin } = require('./distribution.cjs');
 
 async function buildAndPackage() {
   await build();

desktop/packages/mullvad-vpn/tasks/pre-develop.js → desktop/packages/mullvad-vpn/tasks/pre-develop.cjs

@@ -1,4 +1,4 @@
-const { copyAssetsToBuildDirectory, setNodeEnvironment } = require('./utils.js');
+const { copyAssetsToBuildDirectory, setNodeEnvironment } = require('./utils.cjs');
 
 async function preDevelop() {
   setNodeEnvironment('development');

desktop/packages/mullvad-vpn/tasks/utils.js → desktop/packages/mullvad-vpn/tasks/utils.cjs

@@ -1,7 +1,7 @@
 const childProcess = require('child_process');
 const fs = require('fs/promises');
 const path = require('path');
-const { BUILD_DIR, GEO_DIR, LOCALES_DIR, IMAGES_DIR, ICONS_DIR } = require('./constants');
+const { BUILD_DIR, GEO_DIR, LOCALES_DIR, IMAGES_DIR, ICONS_DIR } = require('./constants.cjs');
 
 async function copyAssetsToBuildDirectory() {
   await Promise.all([

desktop/packages/mullvad-vpn/test/e2e/setup/main.ts

@@ -94,7 +94,7 @@ class ApplicationMain {
       frame: true,
       webPreferences: {
         offscreen: CI_E2E && !TEST_SHOW_WINDOW,
-        preload: path.join(__dirname, 'preload.js'),
+        preload: path.join(import.meta.dirname, 'preload.js'),
         nodeIntegration: false,
         nodeIntegrationInWorker: false,
         nodeIntegrationInSubFrames: false,
@@ -109,7 +109,7 @@ class ApplicationMain {
 
     this.registerIpcListeners();
 
-    await window.loadFile(path.join(__dirname, 'index.html'));
+    await window.loadFile(path.join(import.meta.dirname, 'index.html'));
 
     if (process.argv.includes('--show-window')) {
       window.show();

desktop/packages/mullvad-vpn/tsconfig.json

@@ -1,18 +1,21 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "commonjs",
+    "module": "es2022",
     "outDir": "build",
     "rootDirs": [
       "src",
       "assets"
     ],
     "skipLibCheck": true,
-    "target": "es2021",
+    "target": "es2022",
     "lib": [
-      "es2021",
+      "es2022",
       "dom"
     ],
     "typeRoots": [

desktop/packages/mullvad-vpn/vite.config.ts

@@ -50,6 +50,9 @@ const viteConfig = defineConfig({
   build: {
     outDir: OUT_DIR,
   },
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
   plugins: [
     electron({
       main: {
@@ -112,6 +115,13 @@ const viteConfig = defineConfig({
         vite: {
           build: {
             outDir: OUT_DIR,
+            rollupOptions: {
+              output: {
+                // We have to specify preload.js here as otherwise it would
+                // use the '.mjs' file extension.
+                entryFileNames: 'preload.js',
+              },
+            },
           },
         },
       },