расширение .js в скомпилированном файле ts

Всем привет. Возник следующий вопрос, буду очень благодарен за ответ.

Использую автоматическую компиляцию tsc -w, но если в файлах есть import другого файла, например import { Modal } from "./modal", то в скомпилируемом файле пропадает расширение .js и браузер не может загрузить файл. Какая настройка в ts.config за это отвечает (чтобы расширение автоматически выставлялось)? Или какая вообще оптимальная настройка компилятора для TS в современном мире.

{
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "es2022",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

Пример:

import { Modal } from "./modal"; // пропадает расширение, а хотелось чтобы оно автоматически выставлялось
class App {
    modal;
    constructor(modal = new Modal()) {
        this.modal = modal;
        modal.close();
    }
}
new App();
//# sourceMappingURL=app.js.map