Development/Javascript | Vue.js

TypeError: Cannot read properties of null (reading 'parentNode')

Dev. Jkun 2024. 1. 17. 12:38
반응형

Nuxt / Vue (Version 3 기준)

위와 같은 오류가 지속적으로 발생하는데 캡쳐모를 못해놓음. 일단 메세지는 위와 같음.

내용을 읽어보다 예전에 Nuxt/Vue 2 때 본 거 같아서 혹시나 해봤더니 역시나 였음;;
정확한 원인이 아닐 수 도 있지만 그때도 가끔씩 Vue 나 Nuxt 버전 업데이트때 생겼던 것 같아서
일단 정신건강상 개발규칙으로 해놓음.

코드 컨벤션 툴등을 이용하여 규칙화시키면 관리용이.

<!-- 이전코드 -->
<script setup>

</script>
<template>
	<NuxtLayout name="app">
		<slot />
	</NuxtLayout>
</template>

<!-- 변경 후 -->
<script setup>

</script>
<template>
	<div id="app">
		<NuxtLayout name="app">
			<slot />
		</NuxtLayout>
	</div>
</template>

결국엔 NuxtLayout 컴포넌트 위에 루트 엘리먼트가 있어야 했던 것임.
추가적으로 관련 이슈가 github 에도 있다. 다양한 케이스가 있겠지만 위 코드로도 해결이 안되면 확인해보시길

반응형