Level 73
That error basically means that the variable you are expecting to be json isn't.
It is either empty or missing.
1 like
Jan 26, 2025
24
Level 17
SyntaxError: "undefined" is not valid JSON
When i use inertia ssr, i cannot see my css and i get this error.
what can i do to fix this
ssr.ts
// import "./bootstrap";
import "vue-skeletor/dist/vue-skeletor.css";
import "../css/NProgress.css";
import { createSSRApp, h } from "vue";
import type { DefineComponent } from "vue";
import { trail } from "momentum-trail";
import { Skeletor } from "vue-skeletor";
import AppHead from "./Components/AppHead.vue";
import routes from "../routes/js/routing.json";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import Pagination from "./Components/Pagination.vue";
import { createInertiaApp, Head, Link } from "@inertiajs/vue3";
import PortalVue from "portal-vue";
import "../css/style.css";
if (import.meta.hot) {
import.meta.hot.accept();
}
import VueTippy from "vue-tippy";
import "tippy.js/dist/tippy-bundle.umd.min.js";
import "@popperjs/core/dist/umd/popper.min.js";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env?.["VITE_APP_NAME"] || "Laravel";
createServer((page: Page) =>
createInertiaApp({
page,
render: renderToString,
progress: { includeCSS: true, showSpinner: false },
title: (title) => `${title} - ${appName}`,
resolve: name => {
const pages = import.meta.glob<DefineComponent>('./Pages/**/*.vue', { eager: false })
return pages[`./Pages/${name}.vue`]()
},
setup({ App, props, plugin }) {
return createSSRApp({ render: () => h(App, props) })
.use(trail, {
routes,
url: props.initialPage.url,
})
.use(plugin)
.use(VueTippy)
.use(PortalVue)
.component("Skeletor", Skeletor)
.component("Pagination", Pagination)
.component("AppHead", AppHead)
.component("Head", Head)
.component("Link", Link);
},
}).then((app) => {
const appRender = app;
appRender.body = appRender.body.replace(/data-page=".*?"/, "");
return appRender;
}),
);
app.ts
import "./bootstrap";
import "vue-skeletor/dist/vue-skeletor.css";
import "../css/NProgress.css";
import { Skeletor } from "vue-skeletor";
import { createSSRApp, h } from "vue";
import type { DefineComponent } from "vue";
import { createInertiaApp, Head, Link } from "@inertiajs/vue3";
import Pagination from "./Components/Pagination.vue";
import AppHead from "./Components/AppHead.vue";
import { trail } from "momentum-trail";
import routes from "../routes/js/routing.json";
import PortalVue from "portal-vue";
if (import.meta.hot) {
import.meta.hot.accept();
}
import VueTippy from "vue-tippy";
import "tippy.js/dist/tippy-bundle.umd.min.js";
import "@popperjs/core/dist/umd/popper.min.js";
import "tippy.js/dist/tippy.css";
import "tippy.js/themes/light.css";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
const appName = import.meta.env?.["VITE_APP_NAME"] || "Laravel";
createInertiaApp({
progress: { includeCSS: true, showSpinner: false },
title: (title) => `${title} - ${appName}`,
resolve: name => {
const pages = import.meta.glob<DefineComponent>('./Pages/**/*.vue', { eager: false })
return pages[`./Pages/${name}.vue`]()
},
setup({ el, App, props, plugin }) {
createSSRApp({ render: () => h(App, props) })
.use(plugin)
.use(trail, { routes })
.use(VueTippy)
.use(PortalVue)
.component("Skeletor", Skeletor)
.component("Pagination", Pagination)
.component("AppHead", AppHead)
.component("Head", Head)
.component("Link", Link)
.mount(el);
},
}).then(() => {
document.getElementById("app").removeAttribute("data-page");
});
Level 17
@Tray2 so this could mean something like an axios call to an api could be failing
1 like
Level 50
@azbx See where the error comes from. Speculation doesn't help.
1 like
Level 17
@JussiMannisto well this happens globally but its something with inertia. I have speculated that it's from the sidebar as in react sometimes if localstorage is undefined then it returns that but I'm in vuejs.
Level 50
@azbx Look at the error in the console. It doesn't just show an error message, it also shows where the error originates. That might give you a clue.
Level 73
@azbx Could be yes.
1 like
Level 17
@JussiMannisto sometimes there is no error, it just goes to the inertia json dataset code. In non-ssr inertia it works and has no error.
Level 17
@Tray2 OK ill check my calls.
Level 17
@Tray2 could it also be a localStorage issue?
<script setup lang="ts">
import { ref, computed } from "vue";
import { usePage } from "@inertiajs/vue3";
import axios from "axios";
import { route } from 'momentum-trail';
import LanguageModal from "../Modal/LanguageModal.vue";
import SearchResult from "../SearchResult.vue";
import NavLink from "../NavLink.vue";
import Button from "../Button.vue";
import SearchResultSkeleton from "../SearchResultSkeleton.vue";
import VLazyImage from "v-lazy-image";
import PageLoader from "../Loaders/PageLoader.vue";
import throttle from 'lodash/throttle';
import "../../../css/style.css";
// Define the SearchResult interface
interface SearchResult {
url: string;
image: string;
name: string;
// Add other properties if needed
}
interface Props {
landing?: boolean;
}
withDefaults(defineProps<Props>(), {
landing: false,
});
const SearchLoading = ref(false);
const search = ref("");
// Update the type of results to be an array of SearchResult
const results = ref<SearchResult[]>([]);
const performSearch = throttle(async () => {
if (search.value !== "") {
SearchLoading.value = true;
await axios
.get(route("api.search", { search: search.value }))
.then((response) => {
// Assuming the response.data is an array of SearchResult
results.value = response.data.results;
SearchLoading.value = false;
})
.catch((err) => console.log(err));
} else {
SearchLoading.value = true;
results.value = [];
}
}, 1000);
const readAll = async () => {
await axios
.post(route(`api.notif.read-all`))
.then()
.catch((err) => console.log(err));
};
// Language stuff
Ll
const lang = computed<any>(() => props.locale);
const { props } = usePage<any>();
</script>
<template>
<PageLoader v-if="props.site.page_loader" />
<LanguageModal />
<div v-if="props.auth?.user" class="modal" id="profile-modal">
<div class="modal-card modal-card-body" :style="props.auth?.user?.settings.profile_banner_enabled
? {
background:
'url(' + props.auth?.user?.settings.profile_banner_url + ')',
'background-repeat': 'no-repeat',
'background-size': 'cover',
'box-shadow':
'inset 0 0 0 100vw rgba(var(--section-bg-rgb), 0.5)!important',
}
: null
">
<div class="section-borderless">
<div class="gap-2 align-middle flex-container align-justify">
<button class="gap-2 align-middle flex-container squish">
<v-lazy-image :src="usePage<any>().props.auth?.user?.headshot" width="40" class="headshot"
alt="Avatar" src-placeholder="/assets/img/dummy_headshot.png" :style="props.auth?.user?.settings.calling_card_enabled
? {
margin: '0',
border: '0',
'background-image':
'url(' +
props.auth?.user?.settings.calling_card_url +
')',
'background-repeat': 'no-repeat',
'background-size': 'cover',
}
: null
" />
<div class="text-start">
<div class="text-sm fw-semibold text-body">
{{ props.auth?.user?.display_name }}<span class="text-xs text-muted">
({{ "@" + props.auth?.user?.username }} •
{{ "Lvl. " + props.auth?.user?.level }})</span>
</div>
<div v-if="props.auth?.user?.staff" class="mt-1 mb-1 badge badge-danger fw-semibold">
{{ props.auth?.user?.position }}
</div>
<div v-else-if="props.auth?.user?.settings.beta_tester"
class="mt-1 mb-1 badge badge-success fw-semibold">
Beta Tester
</div>
</div>
</button>
<button @click="showModal('profile-modal')" class="btn-circle text-body"
data-toggle-modal="#following-modal" style="margin-right: -10px">
<i class="fad fa-times"></i>
</button>
</div>
</div>
<div class="section-borderless">
<div class="gap-2 section flex-container">
<Link :href="route(`user.profile`, { username: props.auth?.user?.username })
" class="min-w-0 btn btn-info btn-sm">
<i class="fad fa-user-crown"></i>
</Link>
<Link :href="route(`avatar.page`)" class="min-w-0 btn btn-success btn-sm">
<i class="fad fa-palette"></i>
</Link>
<Link :href="route(`user.settings.page`)" class="min-w-0 btn btn-warning btn-sm">
<i class="fad fa-wrench"></i>
</Link>
<a v-if="props.auth?.user && props.auth?.user?.staff" :href="route('admin.page')"
class="min-w-0 btn btn-danger btn-sm show-for-small-only">
<i class="fad fa-gavel"></i>
</a>
<Link :href="route('auth.logout')" method="post" class="min-w-0 btn btn-danger btn-sm" as="button">
<i class="fad fa-right-from-bracket"></i>
</Link>
</div>
</div>
</div>
</div>
<nav class="navbar" :class="{ 'navbar-landing': landing }">
<ul class="navbar-nav grid-x">
<li class="nav-item cell shrink show-for-small hide-for-large me-1" @click="sidebarOpen()">
<button class="btn-circle squish" id="sidebar-toggler">
<i class="text-xl fad fa-bars"></i>
</button>
</li>
<NavLink :link="route(`Welcome`)">
<v-lazy-image :src="props.site.logo" class="show-for-medium" width="180" />
<v-lazy-image :src="props.site.icon" class="show-for-small-only" width="43" />
</NavLink>
<NavLink v-for="topbarlinks in topbar" :link="topbarlinks.url" :active_link="topbarlinks.active_link">
<i :class="topbarlinks.icon"></i>
<span>{{ topbarlinks[lang].title }}</span>
</NavLink>
<li class="nav-item text-danger cell shrink show-for-large">
<div class="side-item">
<a v-if="props.auth?.user && props.auth?.user?.staff" :href="route('admin.page')" class="nav-link">
<i class="fad fa-gavel"></i>
<span>Admin</span>
</a>
</div>
</li>
<li class="mx-1 align-middle nav-item cell auto nav-search mx-md-3">
<input v-if="props.site.frontend.search_bar" v-model="search" type="text" class="form"
id="global-search-bar" name="hidden" autocomplete="off" placeholder="Search..."
@input="performSearch" />
<ul :class="['dropdown-menu', { hide: search === '' }]" id="global-search-results">
<li class="dropdown-title">Quick Results</li>
<SearchResult href="#" v-if="!SearchLoading" v-for="result in results" :link="result.url"
:name="result.name" :image="result.image" />
<SearchResultSkeleton v-else />
<li class="px-2 py-2 text-center dropdown-item" v-if="!SearchLoading && !results">
<div class="gap-3 flex-container flex-dir-column">
<i class="text-5xl fa-solid fa-folder-magnifying-glass text-muted"></i>
<div style="line-height: 16px">
<div class="text-xs fw-bold text-muted text-uppercase">
No Results
</div>
<div class="text-xs text-muted fw-semibold">
My mighty search came up empty! Try a different keyword?
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="dropdown-item">
<Link href="#" class="dropdown-link">
<div class="align-middle flex-container align-justify">
<div class="gap-2 align-middle flex-container">
<i class="text-xl align-middle fad fa-telescope headshot text-muted flex-container align-center flex-child-grow"
style="height: 40px; width: 40px"></i>
<div>
Show all results for "<span class="search-keyword">{{
search
}}</span>"
</div>
</div>
<i class="px-1 fad fa-chevron-right text-muted"></i>
</div>
</Link>
</li>
</ul>
<button v-if="props.site.frontend.search_bar" content="Search" data-tooltip-placement="bottom">
<i class="fad fa-search"></i>
</button>
</li>
<Button v-if="!props.auth?.user" :link="route('auth.register.page')" ColorClass="btn-success"
class="nav-item cell show-for-large shrink me-1">
<i class="fad fa-person-to-portal"></i> Get Started
</Button>
<Button v-if="!props.auth?.user" :link="route('auth.login.page')" ColorClass="btn-info"
class="nav-item cell show-for-large shrink me-1">
<i class="fad fa-door-open"></i> Login
</Button>
<li v-if="props.auth?.user && props.auth?.user?.settings.notifications_enabled"
class="position-relative nav-item cell shrink">
<div class="show-for-small-only position-relative">
<Link :href="route('notification.page')" class="px-2 btn-circle squish text-body">
<span v-if="props.auth?.user?.notifications.length" class="notification-circle"></span>
<i class="text-xl fad fa-bell"></i>
</Link>
</div>
<div class="dropdown show-for-medium position-relative" id="notification_dropdown">
<div @click="addActiveClass(`notification_dropdown`)" class="btn-circle squish">
<button class="px-2 text-body" v-tippy content="Notifications" data-tooltip-placement="bottom">
<span class="notification-circle" v-if="props.auth?.user?.notifications.length"></span><i
class="text-xl fad fa-bell"></i>
</button>
</div>
<ul class="dropdown-menu dropdown-menu-end" style="width: 340px">
<div class="align-middle flex-container">
<div class="dropdown-title">Notifications</div>
<li class="divider flex-child-grow"></li>
</div>
<li v-if="!props.auth?.user?.notifications.length" class="px-2 py-2 text-center dropdown-item">
<div class="gap-3 flex-container flex-dir-column">
<i class="text-5xl fad fa-face-sleeping text-muted"></i>
<div style="line-height: 16px">
<div class="text-xs fw-bold text-muted text-uppercase">
No Notifications
</div>
<div class="text-xs text-muted fw-semibold">
You have not recieved any notifications recently.
</div>
</div>
</div>
</li>
<li v-else v-for="notification in props.auth?.user?.notifications" class="dropdown-item">
<Link :href="notification.data.route" class="dropdown-link">
<div class="gap-1 align-middle flex-container">
<i class="text-lg text-center flex-child-grow"
:class="{ 'fad fa-gift text-warning': notification.data.type === 'gift', 'fad fa-comments-alt text-info': notification.data.type !== 'gift' }"
style="width: 38px"></i>
<div class="gap-2 align-middle flex-container w-100">
<div class="min-w-0" style="line-height: 16px">
<div class="text-sm text-truncate">
<span class="search-keyword" v-if="notification.data.object">{{
notification.data.object }} </span>
<span class="text-sm text-muted">{{
notification.data.message
}}</span>
</div>
<div class="text-xs text-muted">
{{ notification.DateHum }}
</div>
</div>
</div>
</div>
</Link>
</li>
<li class="divider"></li>
<li v-if="props.auth?.user?.notifications.length" class="dropdown-item">
<a @click="readAll()" class="dropdown-link">
<div class="align-middle flex-container align-justify">
<div class="gap-2 align-middle flex-container">
<i v-if="props.site.frontend.sidebar_menu"
class="text-lg align-middle fad fa-check headshot text-muted flex-container align-center flex-child-grow"
style="height: 38px; width: 38px"></i>
<div class="text-sm">Mark All As Read</div>
</div>
</div>
</a>
</li>
<li class="dropdown-item">
<Link :href="route('notification.page')" class="dropdown-link">
<div class="align-middle flex-container align-justify">
<div class="gap-2 align-middle flex-container">
<i v-if="props.site.frontend.sidebar_menu"
class="text-lg align-middle fad fa-bell headshot text-muted flex-container align-center flex-child-grow"
style="height: 38px; width: 38px"></i>
<div class="text-sm">Show All Notifications</div>
</div>
<i class="px-1 text-sm fad fa-chevron-right text-muted"></i>
</div>
</Link>
</li>
</ul>
</div>
</li>
<li v-if="props.auth?.user" class="nav-item cell shrink show-for-large">
<a href="#" class="text-sm nav-link" style="line-height: 20px" v-tippy :content="props.auth?.user?.coins + '' +
` Coin${props.auth?.user?.coins > 1 ? 's' : ''} & ` +
props.auth?.user?.bucks +
` Buck${props.auth?.user?.bucks > 1 ? 's' : ''} `
" data-tooltip-placement="bottom">
<div class="text-warning">
<i class="fad fa-coins" style="width: 22px"></i>{{ props.auth?.user?.coins }}
</div>
<div class="text-success">
<i class="fad fa-money-bill-1-wave" style="width: 22px"></i>{{ props.auth?.user?.bucks }}
</div>
</a>
</li>
<li v-if="props.auth?.user && props.site.frontend.sidebar_menu"
class="dropdown position-relative nav-item cell shrink ms-1" id="user_dropdown">
<button @click="showModal('profile-modal')" class="gap-2 align-middle flex-container squish">
<v-lazy-image :src="usePage<any>().props.auth?.user?.headshot" width="40" class="headshot"
alt="Avatar" src-placeholder="assets/img/dummy_headshot.png" />
<div class="text-start show-for-large">
<div class="text-sm fw-semibold text-body">
{{ props.auth?.user?.display_name }}
</div>
<div v-if="props.auth?.user?.staff" class="mb-1 badge badge-position badge-danger fw-semibold">
{{ props.auth?.user?.position }}
</div>
<div v-else-if="props.auth?.user?.settings?.beta_tester != false"
class="mb-1 badge badge-position badge-success fw-semibold">
Beta Tester
</div>
<div v-else class="text-xs text-muted fw-semibold">
{{ "@" + props.auth?.user?.username }} •
{{ "Lvl. " + props.auth?.user?.level }}
</div>
</div>
<i class="text-sm fad fa-chevron-down text-muted show-for-large"></i>
</button>
</li>
</ul>
</nav>
<nav class="navbar bottom_nav" v-if="!props.site.frontend.sidebar_menu" :class="{ 'navbar-landing': landing }">
<ul class="navbar-nav grid-x">
<li class="nav-item cell shrink show-for-small hide-for-large me-1" @click="sidebarOpen()">
<button class="btn-circle squish" id="sidebar-toggler">
<i class="text-xl fad fa-bars"></i>
</button>
</li>
<NavLink v-for="leftside in left" :link="leftside.url" :active_link="leftside.active_link">
<i :class="leftside.icon"></i>
<span>{{ leftside[lang].title }}</span>
</NavLink>
<li class="nav-item text-danger cell shrink show-for-large">
<div class="side-item">
<a v-if="props.auth?.user && props.auth?.user?.staff" :href="route('admin.page')" class="nav-link">
<i class="fad fa-gavel"></i>
<span>Admin</span>
</a>
</div>
</li>
<li class="mx-1 align-middle nav-item cell auto nav-search mx-md-3">
</li>
<NavLink v-for="rightside in right" :link="rightside.url" :active_link="rightside.active_link">
<i :class="rightside.icon"></i>
<span>{{ rightside[lang].title }}</span>
</NavLink>
<li v-if="props.auth?.user" class="dropdown position-relative nav-item cell shrink ms-1" id="user_dropdown">
<button @click="showModal('profile-modal')" class="gap-2 align-middle flex-container squish">
<v-lazy-image :src="usePage<any>().props.auth?.user?.headshot" width="30" class="headshot"
alt="Avatar" src-placeholder="assets/img/dummy_headshot.png" />
</button>
</li>
</ul>
</nav>
<slot />
</template>
<script lang="ts">
import { directive } from 'vue-tippy'
export default {
beforeMount() {
this.$nextTick(function () {
const theme = localStorage.getItem("theme") || "light";
this.applyTheme(theme);
})
},
directives: {
tippy: directive,
},
methods: {
applyTheme(theme) {
var lowercaseTheme = theme.toLowerCase();
const style = (document.getElementById("theme-style") as HTMLLinkElement);
if (!style) {
let style = (document.createElement("link") as HTMLLinkElement);
style.id = "theme-style";
style.rel = "stylesheet";
document.head.appendChild(style);
}
if (style) {
style.href = `/assets/css/themes/variables-${lowercaseTheme}.css`;
} else {
return console.log("Theme Error");
}
// Save the selected theme in localStorage
localStorage.setItem("theme", theme);
},
showModal(modalId: string): void {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.toggle("active");
}
},
addActiveClass(elementId: string): void {
const element = document.getElementById(elementId);
if (element) {
element.classList.toggle("active");
}
},
sidebarOpen(): void {
const sidebar = document.getElementById("sidebar");
if (sidebar) {
if (sidebar.classList.contains("show-for-large")) {
sidebar.classList.remove("show-for-large");
sidebar.classList.add("hide-for-large");
} else {
sidebar.classList.add("show-for-large");
}
}
},
addActiveClassSSInput(elementId: string): void {
const element = document.getElementById(elementId) as HTMLInputElement;
const isEmpty = (str: string): boolean => !str.trim().length;
if (element) {
element.addEventListener("input", function () {
if (isEmpty(this.value)) {
return;
} else {
element.classList.toggle("hide");
}
});
}
},
},
};
</script>
Level 50
it just goes to the inertia json dataset code
What does this mean?
Whenever there's an error in the browser console, it will show you the file and line number where it occurred, e.g. somefile.js:55, plus the stack trace. If you click on that, it will show you exactly where the error comes from. It might not tell you the root cause of the error, but it's a starting point.
Guessing isn't debugging. Investigate.
Level 17
@JussiMannisto I was not at all -_- heck ill copy and paste that code now
Level 17
Level 50
@azbx You're using built assets instead of npm run dev, so the minified code makes debugging harder. But it looks like the erring function has the same signature as createInertiaApp. It also has a JSON parsing function that tries to load something called dataset.page. That brings up a question about your ssr.ts:
.then((app) => {
const appRender = app;
appRender.body = appRender.body.replace(/data-page=".*?"/, "");
return appRender;
})
Why is this code there? It strips away the data-page attribute from the server-rendered HTML. But that attribute is used for passing data, such as props, to the client as serialized JSON. My guess is that createInertiaApp() in your app.js is trying to parse the contents of data-page, but it crashes because the attribute is empty.
Level 17
@JussiMannisto ooh ill have to try that.
Level 17
@JussiMannisto i jsut went into dev mode and got this
app.ts:52 [Vue warn]: Hydration node mismatch:
- rendered on server: (start of fragment)
- expected on client: Symbol(v-cmt) at <Sidebar image="/assets/img/site-banners/market-background.svg" superBanActive=true OfficialImageBackground=true >
Level 73
@azbx It can basically be any variable that your code expects to be json, and isn't.
I suggest that you take a look in the console, it usually tells you on which line the code is failing.
1 like
Level 50
@azbx Nevermind that. That's just a warning and a complete separate issue. Switching to run dev won't fix the JSON bug that you have.
Did you try removing the code that I showed, and did it fix the JSON parsing error? I'm pretty sure that's the source of the bug, and Inertia cannot work properly if you remove that attribute on the server side. Why is the attribute removed to begin with?
1 like
Level 17
@JussiMannisto did and it did not work.
Level 17
@JussiMannisto i removed it to make the html output cleaner. it has worked with ssr before.
Level 50
@azbx It may have worked until you rebuilt the assets and restarted the SSR server. But I really doubt Inertia could've worked after that.
I don't recommend deleting things unless you understand their purpose.
Level 50
@azbx Just to confirm this, I spun up an SSR site using Breeze:
composer create-project laravel/laravel vue-ssr && cd vue-ssr
composer require laravel/breeze && php artisan breeze:install vue --ssr
php artisan inertia:start-ssr
And everything worked perfectly as you can see in this screenshot.
I then added your data-page clearing code snippet to ssr.js and recompiled the assets. Can you guess the result?
Uncaught (in promise) SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at Nb (app-DFS2u8Ov.js:92:37344)
at app-DFS2u8Ov.js:92:56471
1 like
Level 17
@JussiMannisto i realized when i removed it that i also had it on another load balencer server.
when i changed it there, the issue was resolved.
1 like
Level 17
bump
Level 50
@azbx Please stop doing this. Your threads are not more important than others.
Please or to participate in this conversation.