ES6 모듈 사용 시 나타나는 ERR_ABORTED 404 (Not Found) 오류

🐛 이슈

검색폼을 구현하는 과정에서 메서드 생성 후 새로고침을 누르니 ERR_ABORTED 404 (Not Found) 라는 메시지와 함께 에러가 발생했다.

에러 메시지를 살펴 보니 storage.js라는 파일에서helpers.js 모듈을 import해오는 것을 어떠한 이유로 실패한 것 같았다.

🔍️ 해결

다른 모듈들은 다 정상적으로 로드가 되는데 storage.js 파일에서 유일하게 helpers.js만 동작이 안 되는 이유가 뭘까를 생각해봤다.

해결방법은 정말 간단했다.

// 정상적으로 실행되는 SearchFormView.js 파일의 import 구문
import { on, qs } from '..helpers.js';
import View from './View.js';

// storage.js
import { createPastDate } from './helpers';

다른 파일들과 비교해보니 storage.js 에만 .js 확장자를 사용하지 않은 채로 모듈을 import해버린 것이 문제였다. 그래서 import 구문에 ./helpers.js 로 js 확장자명을 추가해주니 바로 해결되었다.

스택오버플로우에서 찾아 보니 순수 자바스크립트로만 프로그래밍을 할 때 브라우저 내에서 지원되는 ESModule을 사용하면서 자주 일어나는 문제인 듯 했다. React 같은 라이브러리나 프레임워크를 사용하면 Webpack이 알아서 번들링을 해주기 때문에 확장자 없이도 정상적으로 import가 가능하기 때문이다.

결론적으로 번들러를 사용하지 않고 브라우저에서 지원하는 ESModule를 사용할 경우에는 확장자를 꼭 명시해주어야 한다는 것을 깨달았다.

참고

스택오버플로우