pathContext object is empty on build but not dev

[AnalogMemory]

When I run gatsby build, the pathContext object becomes empty and I get the following error TypeError: group is undefined

In my project I'm using in on a non-index page called blog. When I'm running dev mode it's works as expected and the pathContext object has the data. Everything works great until I build it.

I also setup a new bare bones test project using the index example and still running into the same issue when i build it vs develop

Here's the index.js file from the test project

import React, { Component } from "react"
import Link from "gatsby-link";

const NavLink = props => {
  if (!props.test) {
    return <Link to={props.url}>{props.text}</Link>
  } else {
    return <span>{props.text}</span>
  }
}

class Home extends Component {
  render() {
    const data = this.props.data
    const { group, index, first, last, pageCount } = this.props.pathContext
    const previousUrl = index - 1 == 1 ? "" : (index - 1).toString()
    const nextUrl = (index + 1).toString()

    return (
      <div>
        <h1>Posts</h1>
        {group.map(({ node }) => (
          <div key={node.id}>
            <h3>{node.title}</h3>
          </div>
        ))}
        <div className="previousLink">
          <NavLink test={first} url={previousUrl} text="Go to Previous Page" />
        </div>
        <div className="nextLink">
          <NavLink test={last} url={nextUrl} text="Go to Next Page" />
        </div>
      </div>
    )
  }
}

export default Home

export const pageQuery = graphql`
  query homePageQuery {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          id
          slug
        }
      }
    }
  }
`

[pixelstew]

I am seeing this now after updating the package on a test blog i'm using. Will investigate and get back shortly.

[pixelstew]

I am not having the same issue it turns out.

If you set a breakpoint in dev tools on this line const { group, index, first, last, pageCount } = this.props.pathContext - what does your props obj look like?

[AnalogMemory]

So now it's running into the issue when I'm in develop mode :/

Here's what the props object looks like

[AnalogMemory]

Here's an repo of the code i'm testing on: https://github.com/AnalogMemory/gatsby-paginate-test/

[pixelstew]

@AnalogMemory I'll pull down that repo and have a look this evening if the kids don't exhaust me too much!

[tomalexhughes]

@pixelstew Hey man, any update on this? I'm having the same issue.

[manelet]

Updated: Problem solved. Sorryp & Thanks for the work!

[alexiscott]

Hi there,

I wonder how manelgarcia solved this?

I seem to have run into a similar issue. "group" is defined when in develop mode and all works well, but with gatsby build I get WebpackError: TypeError: Cannot read property 'map' of undefined

My component starts like this:

const Press = ({ data, pathContext }) => {

  // pagination. See gatsby node for loading of pathContext.
  const { group, index, first, last} = pathContext;

Any clues as to what could be the issue?

UPDATE The issue that I had was that my template was in the pages folder, and so I just had to move it the the templates folder - sorry, it was an obvious issue that I had missed!

[manelet]

I think this is how I got it solved 🤔

[rotexhawk]

I am running into the same issue. Here is the build output. You can see both PageContext and PathContext is empty but if I console.log the data in gatsby-node before passing it to paginate, the data is there.

no groups { path: '/', 11:28:34 AM: '': 'archive', 11:28:34 AM: uri: '/', 11:28:34 AM: location: { pathname: '/archive/', search: '', hash: '' }, 11:28:34 AM: navigate: [Function: navigate], 11:28:34 AM: children: undefined, 11:28:34 AM: pageContext: {}, 11:28:34 AM: pathContext: {} } 11:28:34 AM: no groups { path: '/', 11:28:34 AM: '': 'immigration-posts', 11:28:34 AM: uri: '/', 11:28:34 AM: location: { pathname: '/immigration-posts', search: '', hash: '' }, 11:28:34 AM: navigate: [Function: navigate], 11:28:34 AM: children: undefined, 11:28:35 AM: pathContext: undefined } 11:28:35 AM: no groups { path: '/', 11:28:35 AM: '': 'immigration-posts/page/2', 11:28:35 AM: uri: '/', 11:28:35 AM: location: 11:28:35 AM: { pathname: '/immigration-posts/page/2/', search: '', hash: '' }, 11:28:35 AM: navigate: [Function: navigate], 11:28:35 AM: children: undefined, 11:28:35 AM: pathContext: undefined }