Gatsby: 404 page component not mounted

[Akh0]

When I visit https://deploy-preview-139--website-unow.netlify.com/404 the page component is mounted and I can put any logic on it. I've logged some React lifecycle method in the console.

And when I visit a page which doesn't exists like https://deploy-preview-139--website-unow.netlify.com/abc the same page is returned but the component is never mounted.

Do you think it's a gatsby problem? Or can it be a wrong configuration of netlify?

[KyleAMathews]

Is this issue related to https://github.com/gatsbyjs/gatsby/issues/1838?

If so, would love for you to help out there!

[revolunet]

i have the same issue and cant tell if its related to #1838 which i have too, but in production :

• when navigate to /404/index.html: lifecycle OK
• when navigate to /404/plop.html: lifecycle KO, and this message in the console : loader.js:251 A page wasn't found for "/404/plop.html"

maybe we should redefine the page variable here ? https://github.com/gatsbyjs/gatsby/blob/6b2732a17b45d3fbe6fd888ee823f61046cb6c5e/packages/gatsby/cache-dir/loader.js#L248-L253

[VitaliiZhukov]

Hi there!
I have the same issue.
www.mysite.com/404 - opens correct 404 page
www.mysite.com/fakeurl - opens only 404 html without mounting.
Did you find the way how to fix it?
Thanks.

[silvenon]

In my case the issue seems to be that a non-existent route /foo renders the component exported by pages/404.js first, _then_ it renders layout/index.js. In /404 it renders them in an expected order.

This crashes the page for me because layouts/index.js provides context for a component in pages/404.js.

If I deliberately avoid errors by holding off until context is available, the page renders fine.

[silvenon]

I added a console.log at the start of each render() of both layout and 404 page to see what's going on in production.

Results for route /404:

1. layout
2. 404

Results for route /foo:

1. 404
2. layout
3. 404
4. layout
5. 404
6. 404
7. layout
8. 404
9. 404

Gatsby has a crazy rendering pattern for unknown routes, I wonder why.

[kmjennison]

@silvenon Thanks for the tips. I also see the odd rendering pattern you described (using Gatsby 1.9.256).

I ran into this problem using material-ui, which expects the root component (in this case, the Gatsby index layout) to be wrapped in <MuiThemeProvider>. This breaks when the 404 component renders before the layout component. Removing MUI components from the 404 component fixed the problem.

As a workaround for those who want MUI components on the 404 page, make sure the MUI theme exists before rendering:

import React from 'react'
import PropTypes from 'prop-types'
import { withTheme } from 'material-ui/styles'

class NotFoundPage extends React.Component {
  render() {
    if (!this.props.theme.palette) {
      return null
    }
    return (
      <div>The real 404 page with material-ui components</div>
    )
  }
}

NotFoundPage.propTypes = {
  theme: PropTypes.shape({
    palette: PropTypes.object,
  }).isRequired,
}

NotFoundPage.defaultProps = {
  theme: {},
}

export default withTheme()(NotFoundPage)

[KyleAMathews]

Gatsby has a crazy rendering pattern for unknown routes, I wonder why.

It's buggy that's why :-) PRs welcome if you'd like to look into it!

[silvenon]

@KyleAMathews yeah, that didn't come across well, I'm sorry. 😅 I shall put my PR pants on and try to help.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.