How to create 404 page for Gatsby with a Preview Bar?

This is posted on behalf of a user:

How would I create a 404 page for Gatsby? I have created my own at /src/pages/404.js and the site sees it just fine but is unable to properly render it

I coded the page almost the same as Agility Page (from  but with the content under <main/> replaced and using an alternate SEO title.

When I try to access the page, it gives me the error "TypeError: Cannot read property 'agilityitem' of undefined" at /src/agility/utils.js:11 file and line.

I would like to keep the PreviewBar on the 404 page when in dev mode.



1 comment
  • Official comment

    Hi John,

    Good find there. The buildPageModel function tries to build a valid Agility Page object based on the sitemap of the page you are referencing. Because the 404 page is an internal page (i.e. not powered by the CMS), it is failing in that method.

    What you can do instead is change your 404 page to look like:

    const NotFoundPage = ({ pageContext, data }) => {
        return (
                <SEO title={someTitle} description={someDescription} />
                <PreviewBar isPreview={pageContext.isPreview} />
                <GlobalHeader />
                <main className="main">
                    <div>Page Not Found</div>


    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post