[JS] Uncaught ReferenceError: ... is not defined 오류 해결 방법

 

오류 코드

Uncaught ReferenceError: 함수 is not defined at HTMLButtonElement.onclick

 

함수를 찾지 못하고 있었다. html에서도 제대로 onclick으로 부르고 있었고, script에서도 함수가 제대로 선언되고 있는데 작동이 되지 않았다.

 
 

문제 추측

firebase을 연동하는 과정에서 오류가 발생했다. script에 firebase라이브러리를 import하고, db에 값이 들어가는지 확인하는데 그때부터 동작이 안 되는 걸 확이했다. 함수도 실행되지 않았고, db에도 값이 저장되지 않았다.

파이어베이스 연동 전에는 분명 제대로 동작되고 있었지만 그 이후에 안 되고 있어 연동 과정에서 생긴 문제라고 생각했다. 파이어베이스 관련 코드를 모두 삭제하고 다시 작성했지만 그것도 실패.
 
 

원인 / 해결

오래 고민한 것과 다르게 아주 간단한 방법으로 해결했다. script를 분리해주는 것.

<script type="module">

        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

		...
        
</script>

<script>
        
        function 함수() { ... }
        
        ...
        
</script>

 
라이브러리를 import하기 위해 script를 모듈로 설정해주었는데, 이 때문에 html - js 자체 함수도 모듈로 동작하고 있었다.
문제가 되던 함수를 일반 script로 넣어 실행시키니 파이어베이스 연동도 제대로 되었고, 기본 함수도 원하는대로 작동됐다. 파이어베이스로 이동해 db를 확인해 값도 제대로 들어가는 걸 확인했다.
 
 

추가

module에서 onclick이 들어가면 동작하지 않는다고 한다!! 문제 함수는 button onclick으로 동작하고 있었다.
script type="module"에서 $('#id').click(async function() { ... }) 로 작성해도 동작 가능했다.

 
 

script module에서는 onclick 작동 x