[Vue] vue-fragment 사용 시 발생하는 DOM Exception 해결

vue component는 하나의 root element를 가져야 한다. 따라서 다중 element가 있는 경우 하나로 감싸주기 위해서 <div>태그를 사용하거나 vue-fragment 패키지를 사용할 수 있다.

 

<fragment> 태그로 감싸서 신나게 작업을 하다보면 다음과 같은 오류를 만날 수 있다.

 

[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.”

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

렌더링 할 때 노드를 정확히 찾지 못해서 문제가 발생하는 것 같은데..

 

일반적으로 fragment를 사용하면 아무런 문제가 없다.

 

다만, fragment의 조건부 렌더링이 연속적으로 발생하는 경우 위와 같은 오류가 발생한다.

조건부 렌더링에 의해 이미 사라진 dom 정보를 가지고 렌더링을 시도해서 문제가 되는 것으로 보인다.

<fragment v-if="a === 'A'"> </fragment>
<fragment v-if="b === 'B'"> </fragment>

v-if가 있는 fragment가 한 개이거나 fragment 사이에 다른 element가 있으면 문제 없다.

 

 

해결방법

• fragment 대신 <template>나 <div> 태그를 사용하면 된다. 아주 쉽고 간단한 방법이다. 이유가 있어서 태그로 감싸줄 수 없다면 다른 방법도 있다.
• v-if 대신 v-show를 사용해서 fragment를 모두 렌더링 하는 방법이 있다.

 

 

vue 버전 3에서는 Fragment를 자체 제공하고 있기 때문에 이러한 걱정은 하지 않아도 된다.

https://v3.ko.vuejs.org/guide/migration/fragments.html