Gatsby: How to show location in components on 404 page in production build

[isaacs]

Summary

I'd like to put a contact form and twitter link on that page so that people can tell me if they find something busted.

I'm having some trouble getting the location to show on my production-built 404 page. It works in dev mode, but in production, the "location" that gets rendered is either undefined or /404.html.

What's weird is that <pre> tag does render it (albeit after initial load), but passing it to the Post and TwitterLink components just gets either "undefined" or "/404.html"

Here's the 404.js: https://github.com/isaacs/blog.izs.me/blob/d4355915f7c8be78f1653fde6ede302ff022ba68/src/pages/404.js

Rendered example: https://blog.izs.me/blargggggggasefasf

This one renders as "undefined": https://github.com/isaacs/blog.izs.me/blob/d4355915f7c8be78f1653fde6ede302ff022ba68/src/pages/404.js#L23

This one renders as "/404.html" https://github.com/isaacs/blog.izs.me/blob/d4355915f7c8be78f1653fde6ede302ff022ba68/src/pages/404.js#L29

And this one shows the full object: https://github.com/isaacs/blog.izs.me/blob/d4355915f7c8be78f1653fde6ede302ff022ba68/src/pages/404.js#L32

Thanks for any help or pointers you can provide.

[isaacs]

I ended up just putting the whole form in JSX, and using netlify to let users submit it, so I'm fine. I think this is still kind of a confusing footgun, though, because it works in dev mode, but then fails in production.

[sidharthachatterjee]

Hey @isaacs

Apologies for the confusion. I reverted back to https://github.com/isaacs/blog.izs.me/commit/10f76d619063b81fc1515c348390722e283a32a9 to try to reproduce this and was able to.

location is coming from reach router

• During develop, the pages are not eagerly built and therefore location is rendered correctly in the client side (the first time)
• During build, since the pages are built eagerly (and location is not available in the cli) it is first rendered as { pathname: '/404.html', search: '', hash: '' } resulting in undefined for location.href

Anyway, what's odd is that the link renders as broken even though React passes in the right value

[sidharthachatterjee]

@isaacs Spend some more time debugging this with @pieh

It seems to be a hydration issue with ReactDOM

From https://reactjs.org/docs/react-dom.html#hydrate

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.

The anchor tag's href attribute is https://twitter.com/intent/tweet?text=%40izs%20404%20undefined&source=blog.izs.me&related=blog.izs.me in the generated html (reasoning in the previous comment) and during hydration, it doesn't get patched.

Moving it to plain text like return <span class="tweet">tweet about it {text}</span> works fine

[isaacs]

I see, so because it's in an _attribute_, it won't be patched. Yeah, it seems like I could potentially do some client-side stuff, like <script type="template"><![CDATA[ <a href="...">tweet about it</a>]]></script> then update it in the browser, but whatever. The netlify form works now, so that's enough to roll with.

We can close this, thanks for answering my question. Bummer that there isn't a straightforward way to make this work, but I suppose Gatsby can't pre-render every possible path that would show the 404 page, that's kind of the point :)

[sidharthachatterjee]

You’re welcome, @isaacs

Glad I could help. As a result of this issue (and a few before), we’re now planning on converging the experience between develop and build as much as possible (https://github.com/gatsbyjs/gatsby/issues/10706)

So in the future, it’ll be much easier to catch these _as early as possible_ during develop.

[Natansab]

Hey @sidharthachatterjee do you know if this issue is now resolved in version 2.13 of gatsby?
I am having an issue when trying to access location.search data.

Thank you!

[LucasBSC]

Having trouble as well to capture location.href data on build

[sethburtonhall]

I am able to get location.pathname locally at run time, but error is thrown on Netlify at build time.

Error on Netlify: WebpackError: TypeError: Cannot read property 'pathname' of undefined