Module '"electron"' can only be default-imported using the 'esModuleInterop' flag

Question

I've migrated my electron main.js to main.ts but I've got this error:

Module '"electron"' can only be default-imported using the 'esModuleInterop' flag

Module '"/Users/alaeddine/node_modules/electron-is-dev/index"' can only be default-imported using the 'esModuleInterop'

main.ts

import electron from "electron"; // this line invokes the error
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

import { join } from "path";
import isDev from "electron-is-dev"; // this line invokes the error

let mainWindow: Electron.BrowserWindow, childWindow: Electron.BrowserWindow;

import { ipcMain } from "electron";

ipcMain.on("asynchronous-message", (event, arg) => {
  mainWindow.webContents.openDevTools();
});

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 480,
    height: 320,
    show: false,
    backgroundColor: "red",
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  childWindow = new BrowserWindow({
    width: 480,
    height: 320,
    show: false,
    parent: mainWindow,
    modal: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  const appUrl = isDev
    ? "http://localhost:3000"
    : `file://${join(__dirname, "../build/index.html")}`;
  mainWindow.loadURL(appUrl);
  childWindow.loadURL(appUrl);
  mainWindow.maximize();
  mainWindow.on("ready-to-show", () => mainWindow.show());
  mainWindow.on("closed", () => mainWindow.destroy());
};
app.on("ready", createWindow);
app.on("window-all-closed", () => {
  // Follow OS convention on whether to quit app when
  // all windows are closed.
  if (process.platform !== "darwin") {
    app.quit();
  }
});
app.on("activate", () => {
  // If the app is still open, but no windows are open,
  // create one when the app comes into focus.
  if (mainWindow === null) {
    createWindow();
  }
});

// Integrate Hot Reload feature
try {
  require("electron-reloader")(module);
} catch (_) {}

tsconfig

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2016",
    "jsx": "react-jsx",
    "strictFunctionTypes": true,
    "sourceMap": true,
    "outDir": "./build",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": ["node_modules", "**/node_modules/*"],
  "include": ["src", "electron/renderer.ts"]
}