Skip to content

TypeError when attempting to edit page collection file in Studio #360

@DallasHoff

Description

@DallasHoff

Environment

Node.js version v22.13.1
nuxt/cli version 3.33.1
Package manager npm@10.9.2
Nuxt version 4.3.1
Nitro version 2.13.1
Builder vite@7.3.1
Config compatibilityDate, css, devtools, fonts, modules, studio, umami, vite
Modules @nuxt/fonts@0.11.4, @vueuse/nuxt@13.9.0, @nuxt/icon@1.15.0, @nuxt/content@3.12.0, nuxt-studio@1.4.0, nuxt-umami@3.2.1

Version

1.4.0

Reproduction

content.config.ts

import { defineCollection, defineContentConfig } from '@nuxt/content';
import { ExamplePageSchema } from './shared/schemas/example-content';

export default defineContentConfig({
	collections: {
		example: defineCollection({
			type: 'page',
			source: 'example/*.json',
			schema: ExamplePageSchema,
		}),
	},
});

shared/schemas/example-content.ts

import { property } from '@nuxt/content';
import z from 'zod';

export const ExamplePageSchema = z.object({
	title: z.string(),
	description: property(z.string()).editor({ input: 'textarea' }),
});

content/example/foo.json

{
  "title": "Foo",
  "description": "Bar"
}

app/pages/example/[id].vue

<script setup lang="ts">
const route = useRoute();
const { data: content } = await useAsyncData(route.path, () => {
	return queryCollection('example').path(route.path).first();
});
</script>

<template>
	<div v-if="content">
		<h1>{{ content.title }}</h1>
		<p>{{ content.description }}</p>
	</div>
</template>

Description

I am struggling to get a basic page collection working with Nuxt Studio. Whenever I open a file that is part of one in Nuxt Studio in production mode, the following error occurs and the Studio editor is empty.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'title')
    at doObjectsMatch (object.js?v=03926415:27:42)
    at doObjectsMatch (object.js?v=03926415:27:10)
    at isDocumentMatchingContent (compare.js?v=03926415:21:10)
    at async KL (main-BaiiAKHN.js?v=03926415:16872:7)
    at async v10 (main-BaiiAKHN.js?v=03926415:16886:17)
    at async Object.selectByFsPath (main-BaiiAKHN.js?v=03926415:16954:19)
    at async Object.p10 [as select] (main-BaiiAKHN.js?v=03926415:20535:11)

If I change the collection to a data collection, it works normally. It also works normally when Studio is in dev mode. Otherwise, I've tried lots of variations of the basic example above, but they all result in this error.

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions