search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

404 Develop Page: Blank in theme development #15429

Closed LekoArts closed 5 years ago

LekoArts commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

rheinardkorf commented 5 years ago

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 commented 5 years ago

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/gatsby@2.12.1...gatsby@2.13.1.

molebox commented 5 years ago

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/gatsby@2.12.1...gatsby@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 commented 5 years ago

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 commented 5 years ago

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:

    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 commented 5 years ago

@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 commented 5 years ago

Is this fixed by the above PR?

kenjonespizza commented 5 years ago

Is this fixed by the above PR?

That PR seemed to have fixed it in my instance 👍

molebox commented 5 years ago

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 commented 5 years ago

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

molebox commented 5 years ago

@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 commented 5 years ago

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

rheinardkorf commented 5 years ago

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

LekoArts commented 5 years ago

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

eclectic-coding commented 5 years ago

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 commented 5 years ago

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

pieh commented 5 years ago

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

eclectic-coding commented 5 years ago

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