Failed to load module script ....

문제 발생 상황

에러 발생 문구 🤔
Failed to load module script: Expected a JavaScript 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.

자바스크립트를 사용한 SPA를 구현하던 중 모듈을 import한 후 발생했다.

번역해보니 자바스크립트로 작성한 모듈을 로드할 수 없다는 문구였다.
일단 제일 빠른 해결방법인 구글링부터 시작했다.

문제 발생 원인

모듈을 import할 때 확장자명, 경로 지정을 제대로 입력하지 않았을 때 발생하는 에러라고 한다.
아무래도 auto import를 사용해서 단순히 생성되는대로 적용해서 발생했던 것같다.
이전에 React기반 프로젝트를 진행하면서 auto import를 사용했는데
해당 익스텐션을 사용하면 .js, ./를 생략해도 됐기 때문이다.

문제 해결

import Dashboard from "../views/Dashboard";
import Posts from "../views/Posts";
import Settings from "../views/Settings";
import NotFound from "../views/NotFound";

문제가 발생하는 경로들을 모두 작성해주면 간단하게 해결됐다.

import Dashboard from "../views/Dashboard.js";
import Posts from "../views/Posts.js";
import Settings from "../views/Settings.js";
import NotFound from "../views/NotFound.js";