Gatsby: [email protected] - Client-only routes broken

[kogal]

Description

Client-only routes broken in [email protected]

Steps to reproduce

Use starter project https://github.com/dwyfrequency/gatsby-ghub that is using the 'gatsby-plugin-create-client-paths' plugin and the latest version of Gatsby.

To check that version 2.13.2 is the problem, fix Gatsby version to 2.13.1 and check that it is now working as expected.

Expected result

Client-only routes should work

Actual result

Client-only routes not working

Environment

System:
OS: macOS 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
Yarn: 1.15.2 - ~/.nvm/versions/node/v11.12.0/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.100
Firefox: 67.0
Safari: 12.1
npmPackages:
gatsby: ^2.10.0 => 2.13.3
gatsby-image: ^2.0.20 => 2.2.4
gatsby-plugin-create-client-paths: ^2.0.2 => 2.1.1
gatsby-plugin-manifest: ^2.0.9 => 2.2.1
gatsby-plugin-offline: ^2.0.16 => 2.2.0
gatsby-plugin-playground: ^1.0.6 => 1.0.6
gatsby-plugin-react-helmet: ^3.0.2 => 3.1.0
gatsby-plugin-sharp: ^2.0.14 => 2.2.2
gatsby-plugin-styled-components: ^3.1.0 => 3.1.0
gatsby-source-filesystem: ^2.0.8 => 2.1.2
gatsby-source-graphql: ^2.1.0 => 2.1.0
gatsby-transformer-sharp: ^2.1.8 => 2.2.1
npmGlobalPackages:
gatsby: 2.7.3

[freiksenet]

Thanks, we are investigating this!

[pieh]

To give more details on what's happening:
If you have /app/* client-only page, previously you needed to use /app/sub-path paths in router inside client-only page. After changes I introduced in https://github.com/gatsbyjs/gatsby/pull/13197 - now /app is stripped and you would need to use just /sub-path part there.

This is definitely breaking change and will have to fix that

[aldegoeij]

@pieh would this the workaround / new way:

Previously

<Router>
    <SubPage path="/app/sub" />
</Router>

New style:

<Router>
    <SubPage path="/sub" />
</Router>

Can confirm this works by the way 😄

[pieh]

Yes, or

<Router basepath="/app">
  <SubPage path="/sub" />
</Router>

which will work both in [email protected] and [email protected]

But, we definitely will need to fix that up, because we can't introduce breaking changes like this. So this is and should be considered as bug

[pieh]

Published [email protected] - please let us know if it completely restores behaviour. I added bunch of e2e tests to validate, but I might have missed some cases

[elrumordelaluz]

I'm on [email protected] and still getting those

Error loading a result for the page query in "/app/sub/1". Query was not run and no cached result was found…

But the solution proposed by @pieh here ~works perfect~ neither works (update after seconds, sorry)

In case could be useful to solve, here is the structure I have under the Router Component:

<Router basepath="/search">
  <SearchPage path="/:term/page/:page" />
  <SearchPage path="/:term" />
  <SearchPage path="/" />
</Router>

[pieh]

@elrumordelaluz Could you post reproduction?

I've been seeing

Error loading a result for the page query in "/app/sub/1". Query was not run and no cached result was found…

errors (which might be better marked as warnings TBH), but apart from them being in terminal, the actual runtime worked properly from my testing and I focused on things that visibly broke. So this might be case of false errors being displayed here.

This is something we need to fix of course.

Also those errors doesn't seem to be result of changes in https://github.com/gatsbyjs/gatsby/pull/13197 - I think I saw them before that, but I'm not 100% sure on that one

[elrumordelaluz]

Could you post reproduction?

I will asap.

Agree on the fact that there are _warnings_ and confirm that everything works as expected besides those console messages.

[colbyfayock]

i'm also seeing the Error loading a result for the page query in develop mode in my terminal and when deployed seeing the .../page-data.json net::ERR_ABORTED 404 (Not Found) errors for the client routes.

on v2.13.27

you can see this on the simple-auth example by installing and upgrading the packages to latest

Develop

Build

Made a bucket with the build output: http://gatsby-simple-auth.s3-website.us-east-2.amazonaws.com/

https://github.com/gatsbyjs/gatsby/issues/15398 was closed as a duplicate and this is closed. is this being tracked separately anywhere as open or were you just waiting to confirm this reproduced?

[himynameistimli]

I also seem to have the issue @colbyfayock describes above, but only for dynamic url client paths. For instance, my auth-required dashboard page works without any errors, but any dynamic url client paths gives console errors on dev, 404s on prod (running gatsby v2.13.32).

Another funny thing is that on another gatsby app that we run (running gatsby v2.7.1) I get 304 errors instead of 404 errors on production for dynamic url client paths.

[eknowles]

im getting this issue described above on 2.13.28

[d1sco]

currently get this warning with CLI 2.7.20 and package 2.13.36

Also seems live reload for the affected routes is not working

[colbyfayock]

For anyone seeing this issue - I reopened the other Issue that seems to address this more specifically: https://github.com/gatsbyjs/gatsby/issues/15398

Still waiting to hear back from the Gatsby team