gridsome icon indicating copy to clipboard operation
gridsome copied to clipboard

Build fails only on Netlify: TypeError: Cannot read property 'title' of undefined

Open freshyill opened this issue 6 years ago • 3 comments

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:

Screen Shot 2019-08-21 at 10 58 48 AM

Fine in the browser locally:

image

Fine in Vue devtools locally:

Screen Shot 2019-08-21 at 10 59 23 AM

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

freshyill avatar Aug 21 '19 15:08 freshyill

Not sure why it behaves differently on Netlify. Can you try querying by id instead?

query MeetingPage ($id: String!) {
  meetingPage (id: $id) {
    ...

hjvedvik avatar Aug 24 '19 23:08 hjvedvik

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.

msgeissler avatar Aug 26 '19 19:08 msgeissler

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.

DRD161 avatar Mar 12 '22 22:03 DRD161