[Vue3] TypeError: Cannot read property 'insertBefore' of null

https://sumni.tistory.com/105

[Vue] 컴포넌트 동적 생성 (agGrid.vue)

위의 코드를 실행하던 중

TypeError: Cannot read property 'insertBefore' of null

이런 에러가 발생하였다.

 

검색 결과

1. 캐시문제

캐시를 비우거나 시크릿 창 열기.

저는 이렇게 했을 때 해결되지 않았습니다.

 

2. html 템플릿에 초기화 되지 않은 데이터

v-if="!!data"를 이용

 

v-if="!!data"는 Vue.js의 조건부 렌더링(Dynamic Rendering) 디렉티브 중 하나입니다. 이 디렉티브는 표현식의 값이 ture인 경우에만 엘리먼트를 렌더링합니다.

여기서 data() 함수는 Vue.js 컴포넌트의 옵션 중 하나로, 컴포넌트의 데이터를 정의하는 함수입니다. 이 함수는 객체를 반환하며, 객체의 속성으로 컴포넌트의 데이터를 정의합니다.

 

v-if="!!data"의 data 객체는 data() 함수의 반환값을 의미합니다.

        <div v-if="!!data" id="workspace" @keydown="mainKeyDown($event)" @keyup="mainKeyUp($event)">
          <div
            id="htmleditormain"
            class="editor"
            tabindex="0"
            @mousemove.prevent="mainMouseMove2($event)"
            @mouseup.prevent="mainMouseUp($event)"
            @mousedown.prevent="mainMouseDown($event)"
            @drop.prevent="dragDrop($event)"
            @dragenter.prevent
            @dragover.prevent
          >
            <div v-for="agGrid in agGrids" :key="agGrid.id" :tabindex="-1">
              <AgGridSample :id="agGrid.id"></AgGridSample>
            </div>
          </div>

위 처럼 코드를 수정했을 때 worksapce가 렌더링되지 않았습니다.

그래서 v-if="!!data"를 지우고 다시 렌더링 하자 에러가 발생하지 않았습니다.

새로고침 한 후에 바로 동작하지 않고 vue코드를 수정하여 다시 컴파일 될때 작동합니다.

아직 해결법을 찾지 못해서 해당 에러가 날 때마다 이걸 지우고 쓰고 반복하는 중입니다😂

 

 

참고 자료

https://www.inflearn.com/questions/132161/svelte-%EB%B0%98%EC%9D%91%EC%84%B1-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98-typeerror-cannot-read-property-x27-insertbefore-x27-of-n

Svelte 반응성 적용 오류 - TypeError: Cannot read property 'insertBefore' of null - 인프런 | 질문 & 답변

https://stackoverflow.com/questions/67862041/vue3-cannot-read-property-insertbefore-of-null

vue3 Cannot read property 'insertBefore' of null