Server Error when opening root / of Nuxt app: "Cannot read properties of null (reading 'id')" in components/base/VGallery.vue:76:17 #145
Description
Directus/Agency OS Info
Directus version 11.9.2
Directus Docker image: 870c7d5d99da
CLI version: 0.7.2
Agency-OS template version: Not sure
Agency-OS repo commit hash: dd00d38fd01ca97a7cc5bfa4df2043d6cc796b08
System Info
OS: Ubuntu 24.04.2 LTS x86_64
Host: KVM/QEMU (Standard PC (i440FX + PIIX, 1996) pc-i440fx-9.0)
Kernel: 6.8.0-57-generic
Uptime: 94 days, 23 hours, 1 min
Packages: 882 (dpkg), 3 (snap)
Shell: bash 5.2.21
Resolution: 1280x800
Terminal: /dev/pts/1
CPU: Intel Xeon E5-2683 v4 (10) @ 2.099GHz
GPU: 00:02.0 Vendor 1234 Device 1111
Memory: 9672MiB / 26493MiB
Dev Server Error
Browser
This is being show in the browser by the Nuxt frontend when opening the base URL (using pnpm dev, note that the paths /auth/signin and /profile work fine):
{
"error": "true",
"url": "/",
"statusCode": 404,
"statusMessage": "Page Not Found",
"message": "Page Not Found",
"stack": "..."
}... with the stack key above having the following textual value:
Page Not Found
at createError (/home/orwa/repos/agency-os-frontend/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:71:15)
at createError (/home/orwa/repos/agency-os-frontend/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]__io_lqrzqqdsopzejkzz4pel7dbzhe/node_modules/nuxt/dist/app/composables/error.js:38:58)
at setup (/home/orwa/repos/agency-os-frontend/pages/[...permalink].vue:195:51)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
Console
In the console, this is being reported:
ERROR [request error] [unhandled] [GET] http://localhost:3303/
ℹ Error: Cannot read properties of null (reading 'id')
⁃ (components/base/VGallery.vue:76:17)
71 ┃ :class="[
72 ┃ 'block relative w-full mb-6 overflow-hidden border dark:border-gray-700 rounded-card focus:outline-none',
73 ┃ ]"
74 ┃ @click="
75 ┃ () => {
❯ 76 ┃ currentItemIdx = itemIdx;
77 ┃ toggle();
78 ┃ }
79 ┃ "
80 ┃ >
81 ┃ <div class="relative block w-full overflow-hidden rounded-card group">
⁃ at ssrRenderList (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:457:7)
⁃ at _sfc_ssrRender (components/base/VGallery.vue:71:42)
⁃ at renderComponentSubTree (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:715:9)
⁃ at renderComponentVNode (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:664:12)
⁃ at ssrRenderComponent (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)
⁃ (components/blocks/Gallery.vue:66:62)
⁃ at renderFnWithContext (node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:689:13)
⁃ at ssrRenderSlotInner (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:114:17)
⁃ at ssrRenderSlot (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:96:3)
[CAUSE]
TypeError {
stack: "Cannot read properties of null (reading 'id')\n" +
'at ./components/base/VGallery.vue:76:17)\n' +
'at ssrRenderList (./node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:457:7)\n' +
'at _sfc_ssrRender (./components/base/VGallery.vue:71:42)\n' +
'at renderComponentSubTree (./node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:715:9)\n' +
'at renderComponentVNode (./node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:664:12)\n' +
'at ssrRenderComponent (./node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)\n' +
'at /home/orwa/repos/agen'... 586 more characters,
message: "Cannot read properties of null (reading 'id')",
}
