javascript - NS_ERROR_CORRUPTED_CONTENT ใน Live Server กับไฟล์ JS ที่สร้างจาก TypeScript

ฉันกำลังพยายามสร้างเว็บไซต์ธนาคารแบบง่ายโดยใช้ TypeScript ธรรมชาติ, HTML, และ CSS ในตอนนี้ก่อน แล้วต่อมาจะเพิ่ม API ของ Plaid เพื่อทดสอบการทำงานของมัน ตอนนี้ฉันกำลังทดสอบโครงสร้างโครงการในเครื่องโดยใช้ Live Server ใน Visual Studio Code

โครงสร้างโครงการของฉันมีลักษณะดังนี้:

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

ฉันพบข้อผิดพลาด NS_ERROR_CORRUPTED_CONTENT เมื่อพยายามโหลดไฟล์ app.js ในโมดูล dashboard.js

นี่คือข้อความข้อผิดพลาดจากคอนโซล:

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

• ประเภท MIME ถูกตั้งค่าไม่ถูกต้องเป็น text/html แทนที่จะเป็น application/javascript
• เส้นทางทั้งหมดถูกต้อง และฉันสามารถกด Ctrl + คลิกเพื่อไปยังโมดูลภายใน VS Code ได้
• ฉันได้ล้างแคชแล้ว รีสตาร์ทเซิร์ฟเวอร์ และสร้างไฟล์ TypeScript ของฉันใหม่โดยใช้ tsc

.

รหัสแดชบอร์ด:

นี่คือโค้ดที่เกี่ยวข้องใน dashboard.js และ 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 (การกำหนดเส้นทาง)

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

คำถาม :

ทำไมไฟล์ app.js ถึงถูกส่งพร้อมกับประเภท MIME เป็น text/HTML และฉันจะแก้ไข NS_ERROR_CORRUPTED_CONTENT ในการตั้งค่าของฉันได้อย่างไร?

ฉันได้ลองแล้ว:

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

ฉันคาดหวังอย่างน้อยให้มันแสดงตัวเลขที่อยู่ในฟังก์ชันดึงยอดเงิน!!

คำตอบ #1

เพิ่งพบว่า เป็นปัญหาที่ตัวคอมไพเลอร์ เมื่อทำการนำเข้า ส่วนขยายจะถูกลบออก ดังนั้นฉันจึงต้องใช้ '.js' อย่างชัดเจน และตั้งค่า "moduleResolution" ให้เป็น node ในไฟล์ tsconfig.json ดังนี้:

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