Level 63
Are you using Ziggy ?
Dec 4, 2022
8
Level 5
Inertia Link Won't Load Page: reading parent node or type of null
Am facing this issue in a second project. I never solved the issue in the first one: I have a list of navs that are used in a component to construct the sidebar like this:
<template :key="index" v-for="(item, index) in navs">
....
<Link v-if="!item.header && !item.disabled" :href="route(item.route)" :class="[
route().current(item.route) ?
'bg-gradient-to-br from-brand-green via-brand-green-600 to-emerald-600 text-white shadow-sm mb-4' :
'text-slate-400 hover:bg-green-400/30',
status? 'p-1 ml-0 pl-2' : 'px-2 py-1 mb-2',
'group text-sm rounded transition-all hover:translate-x-1']">
<i :class="[
status? 'mr-3' : 'text-lg',
item.icon
]" class="flex-shrink-0"></i>
<span :class="{'md:hidden ml-3' : !status}">{{ item.title }}</span>
</Link>
....
All the routes actually exist in my routes/web file. The problem is: when I click on the links, the page render does not happen and it throw an error like this:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (chunk-2244K35H.js?v=7868f521:8449:34)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-2244K35H.js?v=7868f521:5198:11)
at ReactiveEffect.run (chunk-2244K35H.js?v=7868f521:1268:23)
at instance.update (chunk-2244K35H.js?v=7868f521:5230:52)
at callWithErrorHandling (chunk-2244K35H.js?v=7868f521:1554:32)
at flushJobs (chunk-2244K35H.js?v=7868f521:1720:9)
Here is a recording of the same (Just click on the image below)
Level 5
Yes
1 like
Level 63
@Moseskamau338 Have you checked what's really in each item ?
<template :key="index" v-for="(item, index) in navs">
{{ item }}
...
Level 5
@vincent15000 It's an array of objects like these:
[
{
"title": "Dashboard",
"route": "dashboard",
"icon": "fa-solid fa-grid-2"
},
{
"title": "Pages",
"route": "pages",
"icon": "fas fa-file-text"
},
...
]
Level 5
I actually echoed this out on the browser.
1 like
Level 5
I feel like I'll have to drop inertia until am confident that it works because I've never successfully completed any project with it...especially with this Ziggy package
1 like
Level 63
@Moseskamau338 Have you tested if you are using Ziggy as it is suggested ?
Level 5
@vincent15000 Yes I am using Ziggy
1 like
Please or to participate in this conversation.