TypeScript模块无法在HTML中加载的问题求助

Hey there! Let’s work through that module loading error you’re hitting. Based on your config and setup, here are the most likely fixes to try, ordered by how common they are:

1. You’re Probably Loading the Page via file:// Protocol (Critical Fix!) #

Browsers block ES module loading from the local file system (when you double-click index.html and see file:// in the URL bar) due to cross-origin security restrictions. This is the #1 cause of module errors for folks starting out with ES modules.

Fix it by using a local HTTP server:

• Install http-server via npm: npm install -g http-server
• Navigate to your project root folder in the terminal and run: http-server
• Open your browser to http://localhost:8080 (or whatever port it uses) to load your page.
• Alternatively, use VS Code’s Live Server plugin—right-click index.html and select "Open with Live Server" for a quick setup.

2. Your Import Statements Lack File Extensions #

When using ES modules in the browser, all import paths must include the full file extension (.js for compiled files). TypeScript won’t automatically add .js to your imports when compiling to ES modules, so if your TypeScript code looks like this:

import { ProjectInput } from './components/ProjectInput';

The compiled app.js will keep that exact import path, and the browser will try to load ./components/ProjectInput (not ./components/ProjectInput.js)—which it can’t find.

Fix it by adding .js extensions to your TS imports:

// Even though this is a .ts file, we use .js for the import path
import { ProjectInput } from './components/ProjectInput.js';

TypeScript might show a warning about the .js extension, but this is safe and necessary for browser ES modules. You can suppress the warning by adding "allowImportingTsExtensions": false and "moduleSuffixes": [".js", ".ts"] to your tsconfig.json if needed.

3. Verify Compiled File Paths & Structure #

Double-check that your compiled files in the dist directory match the structure of your src folder. For example, if you have src/components/ProjectInput.ts, it should compile to dist/components/ProjectInput.js. If the directory structure is broken, your relative imports will point to the wrong place.

• Run tsc (or your build command) and inspect the dist folder to confirm all files are in the right spots.
• Ensure rootDir and outDir in tsconfig.json are correctly set (yours look good, but it never hurts to double-check!).

4. Watch for Case Sensitivity #

File names are case-sensitive on most HTTP servers (and Linux/macOS systems). If your TypeScript file is ProjectInput.ts but your import uses ./components/projectinput.js, the browser will fail to find the file.

Fix it by matching the exact case of your file names in imports.

5. Double-Check Your Script Tag #

Your index.html script tag looks correct (type="module" src="./dist/app.js"), but confirm:

• The path to dist/app.js is relative to where index.html lives (if index.html is in your project root, this path is correct).
• There are no typos in the file name (e.g., app.js vs App.js).

Start with the HTTP server fix first—that’s almost always the issue when you’re seeing module loading errors with a correct TS config. If that doesn’t work, move on to checking your import extensions and file paths.

内容的提问来源于stack exchange，提问作者Tâm Đỗ