Build fails only on Netlify: TypeError: Cannot read property 'title' of undefined
I'm having issues with a build failing on Netlify that works fine locally. I'm doing the same exact thing for other content types in my site, and it all works fine. And again, everything works just fine locally.
It seems like just as much of a Gridsome issue as a Netlify issue, so I'm going to give it a shot here. Please let me know if I should move this question to a better category.
My main goal here is to figure out what's different about the local environment and the Netlify build environment. I'm running Node 10.16.3 locally.
The most confusing part is that this works:
{{ $page.meetingPage }}
But this does not:
{{ $page.meetingPage.title }}
This is the build error:
10:37:11 AM: TypeError: Cannot read property 'title' of undefined
My template:
<template>
<Layout>
<div>
<h1>This is the page template</h1>
<h1>{{ $page.meetingPage.title }}</h1> <!-- error -->
{{ $page.meetingPage.subtitle }}</i></p> <!-- error -->
<div v-html="$page.meetingPage.content" /> <!-- error -->
<pre>{{ $page.meetingPage }}</pre> <!-- this works fine -->
</div>
</Layout>
</template>
My query:
<page-query>
query MeetingPage ($path: String!) {
meetingPage (path: $path) {
id
title
subtitle
description
content
}
}
</page-query>
Fine in GraphQL explorer locally:

Fine in the browser locally:

Fine in Vue devtools locally:

In case it matters, here's netlify.toml:
[build]
command = "yarn run build"
publish = "dist"
functions = "src/functions"
NODE_ENV = "10.16.3"
[dev]
command = "yarn run develop"
[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200
Not sure why it behaves differently on Netlify. Can you try querying by id instead?
query MeetingPage ($id: String!) {
meetingPage (id: $id) {
...
When you mention that <pre>{{ $page.meetingPage }}</pre> works you probably mean that it simply builds. It does not actually show any content on the page, right? I mean it shouldn't since it looks like it cannot find the content.
Not sure if that is useful, but do you have a MeetingPage overview page from where you link to each meeting page or list them all? Maybe you could have it print the path without actually linking to the MeetingPage template and see if there is a difference between your local environment and Netlify.
I'm having a similar issue only when building using Netlify. When the Netlify build runs it fails with the following error: Error: Cannot query field "title" on type "Post" but when running gridsome build everything is fine.