Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
So I have Laravel setup with InertiaJs through the default Jetsrea, starter kit. I have ofcourse brought in project specific configurations and files, upgraded Tailwind and everything is fine.
Theres one problem though, when I click on the <inertia-link> links, the URL bar changes correctly but the page doesn't change. the error at the console reads like so:
app.js:14657 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
at unmountComponent (app.js:14657:33)
at unmount (app.js:14573:13)
at Object.remove (app.js:14965:21)
at unmount (app.js:14584:28)
at unmountComponent (app.js:14672:13)
at unmount (app.js:14573:13)
at unmountChildren (app.js:14701:13)
at unmount (app.js:14591:17)
at unmountComponent (app.js:14672:13)
at unmount (app.js:14573:13)
Something is failing when trying to swap components with vue. I had suspected ziggy but all my upgrades and fixes didn't work.
Please help me out...Thanks
What that error is saying is that Javascript is trying to read the property typeon an undefined object. This normally happens when we're trying to call a property on an optional object (eg. trying to call invoice.item.description and item is undefined because the invoice has no items).
Can you check the route you're trying to access if it has something like this?
So if you reload the broken page it works?
@Sinnbeck exactly
When I change all links to simple <a> tags, everything works (with complete page reload ofcourse)
@Moseskamau338 maybe start by sharing some code. Seems we can't guess what is wrong based on the error alone
Here goes some relevant peices:
app.js
// require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp,Head, Link } from '@inertiajs/inertia-vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import { InertiaProgress } from '@inertiajs/progress';
import AppFilters from './library/filters'
import mitt from 'mitt'
import * as helpers from "./library/helpers";
const emitter = mitt()
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'POS';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
const system = createApp({ render: () => h(app, props) })
.use(plugin)
.component('AppLayout', AppLayout)
.component('InertiaHead', Head)
.component('InertiaLink', Link)
.mixin({ methods: { route } })
system.provide('emitter', emitter)
system.config.globalProperties.$filters = AppFilters
system.config.globalProperties.helpers = helpers.default
return system.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Then, within my app.blade file:
<html>
<head>
...
<!-- Scripts -->
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
@inertiaHead
</head>
<body class="...">
@inertia
</body>
</html>
A default mix file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.alias({
'@': 'resources/js',
})
if (mix.inProduction()) {
mix.version();
}
The rest in a default implementation of the inertia link tag like so:
<template>
<inertia-link
:href="route('profile.show')"
:class="[
route().current('profile.show') ? 'active styles' :'in-active styles' '',
'default styles',
]">Your Profile</inertia-link>
</template>
<script setup>
// <inertia-link> already made global in app.js
</script>
I decided to redo the project on a new branch just to reproduce the issue and it is very interesting how everything works fine until I introduce page components for the dashboard. Am not sure why that is happening...
@Moseskamau338 Can you share the component that's breaking the file? I'm pretty sure you're just calling a property on a prop that's not correctly initialized.
Here are the lines related to Layouts:
//resources...app.js
createInertiaApp({
resolve: name => {
let page = require(`./Pages/${name}`).default
if (page.layout === undefined){
page.layout = AppLayout
}
return page
},
Then, in one example page using the 'dashboard' layout:
<template>
<div>
Hello features 2
<inertia-link :href="route('home')">Back home</inertia-link>
</div>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
name: "Features",
layout: AppLayout,
setup(){
}
}
</script>
So what happens is, I have a feature 1 page with the exact same syntax just for testing. On the sidebar, I have the following code:
...
<inertia-link v-if="!item.header && !item.disabled" :href="route('features_2')"
:class="[route().current() === item.route ?
'bg-gradient-to-br from-brand-green via-green-600 to-emerald-600 text-white shadow-sm mb-4' :
'text-gray-400 hover:bg-green-400/30 mb-2',
'group flex items-center px-2 py-1 text-xs rounded-md cursor-pointer transition-all hover:translate-x-1']">
<i :class="item.icon" class="mr-3 flex-shrink-0"></i>
{{ item.title }}
</inertia-link>
...
for now I have hardcoded the links just for testing...the issue is, when I use <inertia-link>, the URL changes but not page re-rendering is done as stated in the first post.
What is it with my layout setup?
If you're still getting the same error, at some point, some where the code is trying to access the property type of a null object, assuming the error in the console is the same:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
You need to try and identify where this may happen. It's possible it's in the AppLayout component.
@undeportedmexican I'll check
Please or to participate in this conversation.