Frontend/vue3

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

dddzr 2023. 3. 31. 15:04

https://sumni.tistory.com/105

 

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

그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1.

sumni.tistory.com

위의 코드를 실행하던 중

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 - 인프런 | 질문 & 답변

세심한 터치가 느껴지는 강의에 감동스럽게 듣고있습니다.그러나 잘 나가다가 돌부리에 걸려 넘어진 격으로 애러를 만났습니다.{ #if $done } 반응성 적용이 안되어요..ㅠ 브라우저 콘솔 [사진] life

www.inflearn.com

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

 

vue3 Cannot read property 'insertBefore' of null

I'm getting this error when i try to update my data fields in vuejs. data() { return { form : useForm({ imageFile : null, img_id : null, }),

stackoverflow.com