[vite:build-html] Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name 오류 해결하기

 

안녕하세요. 오늘은 Vite를 사용할 때 자주 마주칠 수 있는 '[vite:build-html] Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name' 오류에 대해 다루려고 합니다. 이 오류는 HTML 파일을 파싱하는 과정에서 발생하며, 오늘 이 포스트를 통해 그 해결 방법을 함께 알아보도록 하겠습니다.

 

 

문제 발생 예시 코드

오류가 발생하는 상황은 아래와 같습니다.

<!-- some-component.vue -->
<template>
  <div>
    <1-custom-component></1-custom-component>
  </div>
</template>

 

위와 같이 컴포넌트의 태그 이름이 숫자로 시작할 경우, Vite 빌드 과정에서 위의 오류 메시지를 볼 수 있습니다.

 

 

원인

HTML5에서는 태그 이름이 ASCII 알파벳 문자로 시작해야 합니다. 숫자로 시작하는 태그 이름은 HTML5 규격에서 허용되지 않으므로, Parser가 태그 이름을 올바르게 해석하지 못하게 됩니다.

 

 

해결 방안 제시

따라서 이를 해결하기 위해서는 태그 이름을 올바르게 수정해야 합니다. 아래는 수정된 예제입니다.

<!-- some-component.vue -->
<template>
  <div>
    <custom-component-1></custom-component-1>
  </div>
</template>

 

태그 이름을 위와 같이 수정하면, 오류 없이 Vite 빌드를 완료할 수 있습니다.

 

 

마무리

이번 포스트에서는 Vite 빌드 중 발생하는 특정 HTML 파싱 오류의 원인과 해결 방안을 알아보았습니다. HTML 문법 규칙을 잘 지키는 것이 중요하며, 이러한 오류를 효과적으로 해결할 수 있게 됩니다.

 

 

---

코드 리뷰 문의 주세요.

함수 리뷰를 기본으로 합니다.

생각 못한 다양한 예외 상황이나

이상 코드 피드백 드립니다.

 

 

오픈톡방 '익스랩 코드 리뷰 신청방'을 검색하세요!

간단한 리뷰는 무료입니다!

---