404 page renders only html

[VitaliiZhukov]

Hi!
I have an issue with 404 page.
I created pages/404.js file and configured cloudfront to give back this route if page not found.
As result I have next case:
www.mysite.com/404 - opens correct 404 page
www.mysite.com/fakeurl - opens only 404 html without mounting. Only prebuilt html content.
I've seen similar issue here but didn't found the solution:
#2223

Is that matter of gatsby or probably server configuration?
Thanks!

[KyleAMathews]

You configured Cloudfront to serve 404.html? Or 404.js?

You should do the former.

[VitaliiZhukov]

Hi @KyleAMathews !
Yeah, I've configured "/404.html" as response page path in cloudfront

When I have url like "/somepage" I can see line in console:

And only prebuilt html is rendered.

[KyleAMathews]

Does your issue seem the same as #1838?

[VitaliiZhukov]

Hi @KyleAMathews
Seems no. I have a link on my 404 page, and it works properly.

[efallancy]

@VitaliiZhukov @KyleAMathews it's not mounted because previously, the callback to mount the DOM was not executed if no page resources found. I suppose the link works fine if it's not relying on gatsby's history in window 😃

gatsby/packages/gatsby/cache-dir/loader.js

Lines 248 to 253 in 6b2732a

	const page = findPage(path)
	if (!page) {
	console.log(`A page wasn't found for "${path}"`)
	return
	}

[VitaliiZhukov]

Hi @KyleAMathews , @emmafallancy
thank you so much for your help. I checked out last release and not found page composed with gatsby.
But I've got another issue: it's mounted twice. In my console I can see now two messages: A page wasn't found for "/somepage"

Did you have such behaviour? Or it's only my case?
Also I noticed that if I create /pages/404.js file then after building I see 404.html file in root, and also /404/index.html file. Why do we have two paths?

[efallancy]

But I've got another issue: it's mounted twice. In my console I can see now two messages: A page wasn't found for "/somepage"

Yup, this is expected since the component-renderer is called twice, as during the constructing of the component, it searches for resources on the layout and pages level.

Also I noticed that if I create /pages/404.js file then after building I see 404.html file in root, and also /404/index.html file. Why do we have two paths?

Some host would search for 404.html file to serve for any pages which couldn't be found. So during production build, if pages/404.js exist, Gatsby will build the 404.html from the pages/404.js. If somehow the host couldn't find any 404.html in production, the host will use its own 404 page.

[VitaliiZhukov]

Got it, thanks!