[ JavaScript ] Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html" 해결하기

 

 

'한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지'라는 강의를 들으면서 마주했던 문제이다.

순수 자바스크립트로 SPA를 구현하면서 마주한 문제이다.

 

분명 다 맞게 작성했다고 생각했는데 실행 후 개발자모드로 콘솔을 보면 제목과 같이 MIME 타입 오류가 발생했다. 

이전에 실습한 내용이랑 내용이 일치했기 때문에 더욱 미궁이었다.

 

원인

결과적으론 모듈을 import할 때 확장자명을 붙이지 않아서 일어난 에러였다.
리액트에서는 모듈 import 시 .js나 ./를  생략해도 문제가 발생하지 않았기에

습관적으로 import 할 모듈 이름만 적고 엔터를 눌러 자동완성을 시켰다.

그런데 이 자동완성에선 확장자를 붙여주지 않는 것이었다....   

하지만 순수 자바스크립트에서 모듈 import 할 때에는 리액트처럼 하면 에러가 발생한다.

 

해결방법

⭕️ import App from "./App.js";
❌ import App from "./App";