Gatsby: Client-Side Routing Broken in Latest Release

[alexlafroscia]

Description

Client-side routing does not seem to be supported any longer when serving the app in "production" (either through gatsby serve or some other static file serving). An unrecognized route redirects back to the route where the client-side router has been mounted.

Steps to reproduce

You can start with this repo here:

https://github.com/alexlafroscia/___gatsby-dynamic-routing-bug

Basically you

• Generate a new Gatsby app
• Configure Gatsby to treat all routes (/*) as being client-side
• View the production version of the app

Expected result

I would expect that, if you hit something like the /foobarbax, it would render the client-side 404 page. This is actually working in local dev.

Index Page

Client-Side 404 Page

Actual result

In the fully static mode it redirects back to the root of the app instead of rendering my 404 component.

This was recorded when running gatsby serve in that repo

Even after changing the URL, it redirects back to the root of the app instead.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.6.2 - /usr/local/bin/zsh
  Binaries:
    Node: 10.13.0 - /var/folders/nv/f8tyc7b960nf4kptb5890t400000gn/T/yarn--1561069776540-0.10964542529805676/node
    Yarn: 1.13.0 - /var/folders/nv/f8tyc7b960nf4kptb5890t400000gn/T/yarn--1561069776540-0.10964542529805676/yarn
    npm: 6.4.1 - ~/.asdf/installs/nodejs/10.13.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 64.0.2
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.10.0 => 2.10.0 
    gatsby-image: ^2.2.0 => 2.2.0 
    gatsby-plugin-create-client-paths: ^2.1.0 => 2.1.0 
    gatsby-plugin-manifest: ^2.2.0 => 2.2.0 
    gatsby-plugin-offline: ^2.2.0 => 2.2.0 
    gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0 
    gatsby-plugin-sharp: ^2.2.0 => 2.2.0 
    gatsby-source-filesystem: ^2.1.0 => 2.1.0 
    gatsby-transformer-sharp: ^2.2.0 => 2.2.0 

[alexlafroscia]

To clarify, this behavior was fine previously. I went through my app's dependencies and upgraded all of the gatsby-plugin-* from the official repository, plus gatsby itself, and we had this break on us.

What we do in our actual app is slightly different, though; rather than leveraging gatsby serve, we're using express.static to serve the public directory with a fallback to serving index.html if the exact file requested does not exist.

[Moocar]

@alexlafroscia Thanks for the detailed report. I think this is the same issue that was reported in https://github.com/gatsbyjs/gatsby/issues/14742. I just did some analysis on it. I believe the core problem is that I removed this line in my pages-manifest change. I'm playing around with a fix now.

[Moocar]

@wardpeet correct. Should be fixed in https://github.com/gatsbyjs/gatsby/pull/15010

[alexlafroscia]

Ah, sorry for the duplicate issue if it’s the same as #14742! I tried to find existing issues but didn’t go back that far.

Thanks for putting a fix together!

[sidharthachatterjee]

Fixed and published in [email protected]

[kogal]

@sidharthachatterjee Client-side routing is broken again in latest gatsby release.

[email protected]
[email protected]