[에러 코드] Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

에러 상황

 

자바스크립트 콘솔창에서 다음과 같은 에러가 뜨는 것을 한번쯤 경험해봤을 것이다.

 

switch.js:54 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at parcelRequire.switch.js (switch.js:54:20)
    at newRequire (switch.b5392d87.js:47:24)
    at switch.b5392d87.js:81:7
    at switch.b5392d87.js:120:3

 

이라는 내용으로 에러에 대해서 뜬다.

 

처음에 당황할 수도 있는데, 이것은 DOM 요소를 로딩하는 부분에서 생긴 오류이다.

 

예를들어, 아래 처럼 switch.js 파일을 head 태그 앞단에 넣어서, js를 호출하고 있다.

 

하지만 switch 파일을 열어보면

 

 

중간에 root 태그를 찾아야 하는 코드가 있다.

 

바로 이것때문에, 실제 화면에서는 페이지가 구현되기 이전이므로, body 태그의 내용이 나오기도 전인데, root 태그를 찾고 있으니 당연히 찾지 못한다는 에러 메시지를 띄운 것이다.

 

 

 

즉, 해결 방법은 코드의 순서만 바꿔주면 해결 가능하다.