Gatsby: 404 Develop Page: Blank in theme development

[LekoArts]

Description

Following Jason's egghead course until step 5. The 404 develop page should show up showing the available pages, instead the pages stays blank and displays nothing.

Steps to reproduce

Setup a monorepo with a theme and example site, add some pages to the theme (basically following Jason's course).

Run yarn workspace my-theme develop and try to visit localhost:8000/asdf.

Expected result

The dev browser should display the 404 dev page.

Actual result

Blank page and error in the terminal:

Page not found /404.html
Error loading a result for the page query in "/asdf". Query was not run and no cached result was found.
Page not found /asdf

Environment

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
Shell: 5.7.1 - /opt/local/bin/zsh
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.16.0 - /opt/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.100
Safari: 12.1.1
npmGlobalPackages:
gatsby-cli: 2.7.7

[ryanwiemer]

@LekoArts I noticed this as well when taking the course.

This brings up a related question. How should static pages be created when developing a theme?

Not only is the 404 page not configured automatically it doesn't appear to be created at all. 404 pages or any other static page normally I add them in src/pages/ and Gatsby creates the page for me without requiring me to specifically include it in gatsby-node.js. With theme development however it seems that functionality doesn't work. It's not really clear to me if that is intentional or just a bug.

[ChristopherBiscardi]

How should static pages be created when developing a theme?

Static pages can be created using gatsby-plugin-page-creator (the same plugin gatsby itself uses), or by making createPage calls. Using gatsby-plugin-page-creator allows the user's site to shadow a relevant page by creating their own page at src/pages/my-static-page.js.

The 404 page is a special case that isn't handled in the same way. I'm not sure why this is currently happening and have to look into it.

[molebox]

having this issue too, kinda blocking. whats the work around for this?

[rheinardkorf]

Right now I've found the only solution is to actually create src/pages/404.js. This defeats the purpose of bundling as much in the theme as possible.

@ChristopherBiscardi hope you find the source of this issue soon. 🤞

[TK05]

Ran into this issue as well. Dev 404 page does work up to 2.12.1 but not from 2.13.1 onward. Maybe related to https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.13.1.

[molebox]

Ran into this issue as well. Dev 404 page does work up to 2.12.1 but not from 2.13.1 onward. Maybe related to https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.13.1.

Seeing as themes were added to core later than 2.12.1 (is this true?) would reverting back to 2.12.1 and adding a theme as a plugin work?

I just wanna code! :(

[molebox]

I actually forgot that @ChristopherBiscardi mentioned on twitter that installing gatsby-plugin-compile-es6-packages in the demo site and reffing the theme solves the problem of the 404 and not finding /. Im still getting a blank page but i did get this to work the other night on another theme im working on so will post again when i figure out what i did to get it to work! :)

I should also add that i have a couple of themes published which are working fine, they are both running on 2.13.1

[pieh]

I did some checking and there are 2 issues here and both of them doesn't seem to be "theme" related:

1. Gatsby expect 404 page to have exactly "/404/" or "/404.html" path
   Related code:

   • https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/prod-404/gatsby-node.js
     This create duplicate of /404/ (if it exists) as /404.html
   • Runtime will check specifically for /404.html in few locations (you can search gatsby/cache-dir for that string to find those.

   As QoL improvement I will make check that copies /404/ page more relaxed so leading and trailing slashes are optional.

2. Dev 404 doesn't work at all when "/404.html" doesn't exist - this actually requires users to provide 404 for it to work, which definitely is not something we want.

In my test case I used following snippet in theme's createPages:

  createPage({
    path: `/404/`,
    component: require.resolve(`./src/templates/404`),
  })

Which made dev 404 work - so I believe there is nothing inherently problematic with themes - it's overall gatsby core issue

[TK05]

@pieh ahh #2 makes sense. i was testing w/ the hello world starter which doesn't have a 404 page included. simply creating even an empty file brings back the dev 404 functionality. still broken but an easy enough workaround for the time being

[molebox]

Is this fixed by the above PR?

[kenjonespizza]

Is this fixed by the above PR?

That PR seemed to have fixed it in my instance 👍

[molebox]

Is this fixed by the above PR?

That PR seemed to have fixed it in my instance 👍

Hmm thats strange cos im still getting a blank page and:

Page not found /404.html
Error loading a result for the page query in "/404.html". Query was not run and no cached result was found.

I just tried it on 2.13.19.

Am i missing something?

[pieh]

@molebox Could try running gatsby clean and restarting gatsby develop?

[molebox]

@molebox Could try running gatsby clean and restarting gatsby develop?

Ive tried that multiple times. I even removed typescript, eslint, the whole shabang and just had a index.js with a h1 but still a blank page with that error

[pieh]

@molebox Can you share your repo so we could take a look?

[rheinardkorf]

thanks @pieh .... works perfectly on 2.13.9 🥇

[LekoArts]

Fixed by https://github.com/gatsbyjs/gatsby/pull/15658

[eclectic-coding]

So, not entirely fixed. I have upgraded to Gatsby 2.13.21. When you go to a non-existent page the default 404 page WILL display.
However, when you first load localhost:8000 the 404 error displays in the terminal window:

Error loading a result for the page query in "/404.html". Query was not run and
Page not found /404.html

Work in progress repo

[sidharthachatterjee]

@polishedwp Opened a separate issue to track that in https://github.com/gatsbyjs/gatsby/issues/15724

[pieh]

@polishedwp Just to clarify - in browser things work, just to error is displayed in terminal?

[eclectic-coding]

@pieh Correct. I installed the gatsby-starter-theme-notes and the behavior is the same. The error message does not seem theme dependant.