HTML 파일이 소스 모듈에서 JavaScript 함수를 찾지 못하는 이유와 해결 방법

HTML 파일에서 모듈로 JavaScript 함수를 가져올(import) 때 "함수를 찾을 수 없다"는 오류가 발생하는 가장 흔한 원인은, 해당 함수 앞에 export 문을 작성하지 않았기 때문입니다.

ES 모듈(ES Module) 시스템에서는 다른 파일에서 가져올 함수나 변수를 반드시 export 키워드로 내보내야 합니다. 즉, 스크립트 파일로 가져올 함수 앞에 export를 붙여주어야 정상적으로 임포트할 수 있습니다.

1. 함수 내보내기 — demo.js

아래는 demo.js 파일의 예제입니다. test() 함수 앞에 export 키워드가 붙어 있는 것을 확인할 수 있습니다.

console.log("function will import");
export function test(){
    console.log("Imported!!!");
}

2. 함수 가져오기 — index.html

이제 위에서 만든 test() 함수를 가져오는 index.html 파일입니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script type='module'>
    import { test } from "./demo.js"
    test();
</script>
</body>
</html>

3. 프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 index.html(또는 원하는 이름)로 저장한 뒤, 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 됩니다.

Live Server는 로컬 개발 환경에서 HTTP 서버를 통해 파일을 제공하기 때문에, ES 모듈의 CORS 정책 문제 없이 import 기능을 정상적으로 테스트할 수 있습니다.

실행 결과

정상적으로 실행되면 demo.js의 test() 함수가 호출되어 콘솔에 다음과 같은 출력이 나타납니다.

HTML 파일이 소스 모듈에서 JavaScript 함수를 찾지 못하는 이유와 해결 방법

정리

모듈에서 다른 파일로 함수를 전달하려면 함수 선언 앞에 export 키워드를 반드시 붙여야 합니다.
가져오는 쪽에서는 <script type="module"> 태그 안에서 import { 함수명 } from "파일경로" 형식으로 작성합니다.
VS Code의 Live Server 확장 프로그램을 사용하면 모듈 임포트를 손쉽게 테스트할 수 있습니다.