Gatsby: Blank page using client-paths and pathPrefix

[elrumordelaluz]

Description

Maybe I am missing something, but found a simple _use case_ that finishes with an unexpected result. I created this repo with the minimal reproduction.

In this example, i am using _Client only routes_. I tried both, using onCreatePage hook as explained here or by using the gatsby-plugin-create-client-paths.

In the _development_ environment (gatsby develop) everything works as expected:

The unexpected results came when _building_ the website by running gatsby build --prefix-paths and serving through gatsby serve --prefix-paths

I didn't found related _issues_ on using _Client only routes_ and prefixPath, but a recurrent situations could be publishing the website into gh-pages as explaned here where the /reponame sholud be prefixed.

Here is the published website into gh-pages branch where is visible the current result.

Steps to reproduce

1. Create a super basic gatsby website
2. Add gatsby-plugin-create-client-paths and gatsby-source-filesystem.
3. Add one static _Page_, like /pages/index.js and the other that will be only-client, in this case /pages/app.js.
4. Add some for testing purpose
5. Run in development to check that is working as expected
6. Run gatsby build --prefix-paths, then gatsby serve --prefix-paths
7. Navigate to /app…

Expected result

I expect to navigate the website the same way as in _development_

Actual result

Blank page.

Environment

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 81.0.4044.113
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.29 => 2.20.29
    gatsby-plugin-create-client-paths: 2.2.3 => 2.2.3
    gatsby-source-filesystem: 2.2.4 => 2.2.4

[DysonLinDev]

I'm facing the same issue
++ 1

[kkarkos]

Not sure how your folder structure looks like but this worked for me:

gatsby-config.js for dynamic routes looks like that

{
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/app/*`] },
    },

Now, my < App > component lives under src/components/app/index.js

In my netlify.toml (or _redirects file, whatever you are using) you need to make sure that you are pointing to the index:

[[redirects]]
  from = "/app/index/*"
  to = "/app.html"
  status = 200
  force = true

and not from = "/app/*" only.

Hope that helps.

[elrumordelaluz]

Thanks @kkarkos. That is what i tried. However, since I wasn't working on _Netlify_ but in my own server, could you confirm me that in your _use-case_ you access to the /app dynamic routes through an url similar to lorem-ipsum.netlify.app/website/app where /website is the pathPrefix.

Apparently the issue it isn't related only to a redirect (which I used to set in some nginx servers when using dynamic routes), but the combination of dynamic routes with pathPrefix.

[ehrencrona]

@elrumordelaluz I tried running your reproduction repo. AppPage does get called even with the prefix when you run gatsby serve; the issue is that the client-side router you've built assumes the site is served on the root and it therefore doesn't match any router (which leads to an empty page being served).

But if you just tell the router where you serve the site from using <Router basepath={__PATH_PREFIX__}> it works fine in both cases.

__PATH_PREFIX__ is a global variable set by Gatsby. I'm not sure if there's maybe any cleaner way of accessing it.

[elrumordelaluz]

hey @ehrencrona seems to work as expected!

Maybe could be updated the docs here with this information.

Thanks!

[wardpeet]

We would love an update to our docs, stating this fix when path-prefix is used!

[ehrencrona]

@wardpeet So you think it's ok to access __PATH_PREFIX__ in this way? The name kind of makes it smell "private" to me. Could we an accessor function somewhere instead?

Or re-export a Router component that always binds basepath to it? There's not really any case when you wouldn't want it.

[ehrencrona]

I found the client-only routes chapter a bit confusing so I wound up rewriting quite a bit. Thankful for feedback!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[kylegoetz]

For what it's worth __PATH_PREFIX__ does not seem to work after building. Above someone claims it's a global variable set by Gatsby, but if I'm in my Gatsby site being served by Apache and I open the browser console and type __PATH_PREFIX__ the variable does not exist.