NS_ERROR_CORRUPTED_CONTENT in Live Server with TypeScript-generated JS files

I'm trying to build a simple banking website using vanilla TypeScript, HTML, and CSS, for now, then later add in the plaid API to test its operations. I'm currently testing the project structure locally using Live Server in Visual Studio Code.

My project structure looks like this:

front-end/
├── dist/
│   ├── main.js
│   ├── login/
│   │   └── login.js
│   ├── dashboard/
│   │   └── dashboard.js
│   └── utils/
│       └── app.js
├── public/
│   ├── index.html
│   ├── login.html
│   └── dashboard.html
├── src/
│   ├── login/
│   │   └── login.ts
│   ├── dashboard/
│   │   └── dashboard.ts
│   └── utils/
│       └── app.ts
└── style/
    └── styles.css

I encountering an NS_ERROR_CORRUPTED_CONTENT error when trying to load the app.js file in the dashboard.js module.

Here’s the error message from the console:

GET http://127.0.0.1:5500/front-end/dist/utils/app NS_ERROR_CORRUPTED_CONTENT

• The MIME type is incorrectly being set to text/html instead of application/javascript.
• All paths are correct, and I can Ctrl + Click to navigate to the modules within VS Code.
• I already cleared the cache, restarted the server, and rebuilt my TypeScript files using tsc.

.

The Dashboard Code:

Here's the relevant code in dashboard.js and app.js:

dashboard.js:

import { fetchBalance, updateBalanceDisplay } from '../utils/app';

export default async function initDashboard() {
    const balance = await fetchBalance();
    updateBalanceDisplay(balance);
}

app.js

export function fetchBalance() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(1250.50);
        }, 1000); // Simulate a network delay
    });
}

export function updateBalanceDisplay(balance: number) {
    const balanceElement = document.getElementById('balance');
    if (balanceElement) {
        balanceElement.textContent = `$${balance.toFixed(2)}`;
    }
}

main.js (routing)

function handleRouting() {
    const path = window.location.pathname;
    if (path.includes('login.html')) {
        import('./login/login').then(module => {
            module.default();
        });
    } else if (path.includes('dashboard.html')) {
        import('./dashboard/dashboard').then(module => {
            module.default();
        }).catch(error => {
            console.error("Error loading dashboard module:", error);
        });
    }
}
handleRouting();

Question:

Why is the app.js file being served with a text/HTML MIME type, and how can I fix the NS_ERROR_CORRUPTED_CONTENT in my setup?

I’ve tried:

• Verified the file paths and ensured they're correct relative to the dist folder.
• Cleared browser cache and hard-reloaded the page.
• Disabled caching in Live Server settings in VS Code.
• Tried loading the app.js file directly in the browser, but it still results in the same error

I expect it to atleast display the number that's on the fetch balance function!!

Just found out, it was an issue with the compiler, when importing the extension would be removed so i had to expilictyly use '.js' and make "moduleResolution" to be node in the tsconfig.json as such:

{
  "compilerOptions": {
    "moduleResolution": "node",
    // other options...
  }
}