Gridsome "Cannot read property of undefined" on build in CI

By Daniel Zoghalchali·Latchkey

During gridsome build, a template, gridsome.config.js, or a plugin hook reads a nested property of something that turned out to be undefined. The build throws a TypeError naming the property.

What this error means

gridsome build fails with "TypeError: Cannot read property 'X' of undefined" (or "Cannot read properties of undefined") with a stack pointing into a template or config.

TypeError: Cannot read properties of undefined (reading 'title')
    at Blog.vue ... $page.blogPost.title

Common causes

A query returned no node for a page

The page query resolved to null (no matching content), so reading .title on it throws.

Config reads optional data unconditionally

gridsome.config.js or a hook assumes a value (an env var, a nested option) that is undefined in CI.

How to fix it

Guard the nested access

Use optional chaining or a fallback so an absent node does not crash the render.

<h1>{{ $page.blogPost?.title || 'Untitled' }}</h1>

Default config values in CI

1. Find the undefined value in the stack trace.
2. Default the env var or option it reads.
3. Re-run the build to confirm it no longer throws.

siteUrl: process.env.SITE_URL || 'https://example.com'

How to prevent it

• Use optional chaining for query results in templates.
• Default env-dependent config values.
• Ensure content exists so page queries return nodes.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation