javascript - NS_ERROR_CORRUPTED_CONTENT în Live Server cu fișiere JS generate din TypeScript

Încerc să construiesc un site bancar simplu folosind TypeScript simplu, HTML și CSS, deocamdată, și apoi să adaug API-ul Plaid pentru a-i testa operațiunile. În prezent testez structura proiectului local folosind Live Server în Visual Studio Code.

Structura proiectului meu arată astfel:

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

Întâmpin o eroare NS_ERROR_CORRUPTED_CONTENT atunci când încerc să încarc fișierul app.js în modulul dashboard.js.

Iată mesajul de eroare din consolă:

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

• Tipul MIME este setat incorect la text/html în loc de application/javascript.
• Toate căile sunt corecte și pot face Ctrl + Click pentru a naviga la modulele din VS Code.
• Am șters deja memoria cache, am repornit serverul și am reconstruit fișierele mele TypeScript folosind tsc.

.

Codul Panoului de control:

Iată codul relevant în dashboard.js și 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 (rutare)

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();

Întrebare :

De ce fișierul app.js este servit cu un tip MIME text/HTML și cum pot să remediez eroarea NS_ERROR_CORRUPTED_CONTENT în configurația mea?

Am încercat:

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

Mă aștept să afișeze măcar numărul care este în funcția de preluare a soldului!!

Răspuns #1

Tocmai am aflat, a fost o problemă cu compilatorul, când se importa, extensia era eliminată, așa că a trebuit să folosesc explicit '.js' și să fac ca "moduleResolution" să fie node în tsconfig.json astfel:

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