Failed to load module script 에러 해결기

에러 화면

 

Vanilla JS로 프로젝트를 진행하던 중 익숙한 에러 메시지를 다시 마주쳤습니다.

예전에도 본 기억이 있는데, 이번 기회에 에러 원인과 해결 방법을 정리해 두면 좋을 것 같아 공유합니다.

💥 에러 메시지

Failed to load module script: Expected a JavaScript-or Wasm module script but the server responded with a MIME type of "text/html".  
Strict MIME type checking is enforced for module scripts per HTML spec.

---

🔍 원인 분석

index.html 에서 다음과 같이 모듈 스크립트를 불러오고 있었습니다.

<script type="module" src="/src/index.js"></script>

 

index.js 내부에서는 App.js를 import하고 있었는데요

import App from "./App";

 

여기서 문제가 발생했습니다. type="module"을 사용하는 경우, 브라우저는 정확한 파일 확장자를 요구합니다.

"./App"이라고만 작성하면 브라우저가 ./App 경로를 찾지 못하고, 결국 404 페이지(HTML)를 받아오게 되며, MIME type이 text/html이 되어 에러가 발생합니다.

 

✅ 해결 방법

import App from "./App.js";

 

위의 코드 처럼 확장자를 명시해 주면 해결됩니다.

---

📌  정리

• type="module"을 사용하는 경우, import 경로에 확장자 .js를 반드시 명시해야 한다
• 명시하지 않으면 브라우저가 해당 파일을 찾지 못해 404를 반환하고, HTML이 응답되면서 MIME type 에러가 발생한다
• 특히 개발 서버(예: Vite, Webpack Dev Server 등)가 잘못된 경로를 index.html로 리다이렉트 하는 경우 자주 발생

 

❓그런데, 왜 React 프로젝트에서는 에러가 안 날까?

 

React 프로젝트에서는 보통 Webpack, Vite, CRA(Create React App) 같은 번들러가 사용됩니다. 이 도구들은 다음과 같은 역할을 해줍니다:

• .js 확장자를 생략해도 내부적으로 파일을 올바르게 해석해서 번들링함
• import 경로를 분석해서 상대 경로나 확장자가 없더라도 자동으로 처리
• 개발 중에는 dev server가 경로를 proxy 하거나 fallback 처리해서 HTML이 아닌 JS 파일을 반환

즉, React 환경에서는 개발 서버와 번들러가 에러를 미리 막아주고 경로 문제를 알아서 처리해 주기 때문에 동일한 코드를 작성해도 에러가 발생하지 않습니다.

하지만 Vanilla JS 환경에서는 이러한 도구들이 없기 때문에, 브라우저가 모든 것을 직접 해석하며 엄격한 규칙을 적용합니다. 따라서 모듈 스크립트를 사용할 때는 반드시 경로와 확장자를 정확하게 써야 한다는 점을 기억해야 할 것 같습니다.