gatsby: 404 Develop Page: Blank in theme development

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® Core™ 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 21 (10 by maintainers)

Most upvoted comments

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

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.
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

pieh on Jul 10, 2019

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

sidharthachatterjee on Jul 15, 2019

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

eclectic-coding on Jul 14, 2019