Gatsby: [v2] pathPrefix is partially ignored

[asistapl]

Description

After upgrading to v2 pathPrefix is not working properly. It is added for links and assets in HTML, but ignored in other places which results in redirection like this:
Opening: githubusername.github.io/reponame
changes URL in address bar to: githubusername.github.io/ and screen goes blank.

I see that pathPrefix is not included in generated html files (https://github.com/asistapl/tldr-marketing/blob/gh-pages/index.html):

<script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---src-pages-index-js","jsonName":"index","path":"/"};window.dataPath="173/path---index-6a9-NZuapzHg3X9TaN1iIixfv1W23E";/*]]>*/</script>

and in one of the chunks (https://github.com/asistapl/tldr-marketing/blob/gh-pages/4-0d5ca849d8ef3a6a86ed.js):

(window.webpackJsonp = window.webpackJsonp || []).push([
  [4],
  {
    155: function(a) {
      a.exports = {
        pages: [
          {
            componentChunkName: 'component---src-pages-404-js',
            jsonName: '404-22d',
            path: '/404/',
          },
          {
            componentChunkName: 'component---src-pages-index-js',
            jsonName: 'index',
            path: '/',
          },
          {
            componentChunkName: 'component---src-pages-404-js',
            jsonName: '404-html-516',
            path: '/404.html',
          },
        ],
        dataPaths: {
          index: '173/path---index-6a9-NZuapzHg3X9TaN1iIixfv1W23E',
          'sq--src-components-layout-js': 755544856,
          '404-22d': '44/path---404-22-d-bce-NZuapzHg3X9TaN1iIixfv1W23E',
          '404-html-516':
            '164/path---404-html-516-62a-NZuapzHg3X9TaN1iIixfv1W23E',
        },
      }
    },
  },
])
//# sourceMappingURL=4-0d5ca849d8ef3a6a86ed.js.map

Steps to reproduce

Include pathPrefix: '/reponame, in gatsby-config.js.
Use npm script "deploy": "gatsby build --prefix-paths && gh-pages -d public",

Or take a look at my repo (with master and gh-pages branches) where problem is occurring:

Repo:
https://github.com/asistapl/tldr-marketing/
GH Pages:
https://asistapl.github.io/tldr-marketing/

Expected result

pathPrefix is taken into account in every stage of a build proccess.

Actual result

It's not.

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.9.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.2.0 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 61.0.2
Safari: 11.1.2
npmPackages:
gatsby: next => 2.0.0-rc.8
gatsby-plugin-emotion: next => 2.0.0-rc.1
gatsby-plugin-google-tagmanager: next => 2.0.0-rc.1
gatsby-plugin-manifest: next => 2.0.2-rc.1
gatsby-plugin-offline: next => 2.0.0-rc.2
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
npmGlobalPackages:
gatsby-cli: 1.1.58

[pieh]

@davidbailey00 Hey, I think this https://github.com/gatsbyjs/gatsby/blob/faf58c8a05453763301f5de631e5efc95abd788e/packages/gatsby/cache-dir/production-app.js#L83-L91 is causing this problem - we don't include pathPrefix in pages metadata relying on router's basepath property - so that check (and redirection) should be updated to adjust path with pathPrefix

[davidbailey00]

@pieh sorry, only just saw this - I think you're right that these lines are causing the problem, but to me it seems the root cause is that window.page.path doesn't include the prefix, rather than the quoted lines.

[pieh]

window.page.path and other data in .cache/pages.json doesn't include pathPrefix because this is handled by reach router (and previously be react router) with this part https://github.com/gatsbyjs/gatsby/blob/512de27947f020fc78181210a2e7798e905eac67/packages/gatsby/cache-dir/production-app.js#L112-L117 which just assume path prefix as base path. It also allow to use gatsby-link with paths that don't include pathPrefix (otherwise it would be very problematic to use gatsby develop and gatsby build with pathprefixes).

[davidbailey00]

@pieh Okay, that makes sense. In my PR I decided to add the pathPrefix to window.page as a new keypair rather than to window.page.path in order to preserve this behaviour with Reach / gatsby-link etc.

[kishba]

I'm wondering if this is what's causing our Gatsby 2 prototype project to fail its continuous integration builds right now? We're seeing the content of the page render and then a flash to a blank page and the browser's URL is changed to remove the pathPrefix value...

We downgraded to rc 7 and the builds are working again.

[ahinrichs]

@kishba: Yep, it's just that. Having exact the same behaviour here. The mentioned code appeared in rc8.

[pieh]

@kishba, @ahinrichs are you using path prefix?

[kishba]

@pieh Yes, we're launching a new sub site at our college using Gatsby. We build with this command: gatsby build --prefix-paths :)

The site was just deployed today at https://www.midmich.edu/pathways

For now we've switched from "gatsby": "next", to "gatsby": "2.0.0-rc.7",

[ahinrichs]

@pieh Yes. With pathPrefix the page flashes, than blanks and location jumps to /"withoutPrefix".

--- gatsby/cache-dir/production-app.js.rc10     2018-09-04 21:13:29.082429604 +0200
+++ gatsby/cache-dir/production-app.js  2018-09-04 21:06:14.323047471 +0200
@@ -82,10 +82,10 @@

   if (
     window.page.path &&
-    window.page.path !== window.location.pathname &&
+    __PATH_PREFIX__ + window.page.path !== window.location.pathname &&
     window.page.path !== `/offline-plugin-app-shell-fallback/`
   ) {
-    navigate(window.page.path + window.location.search + window.location.hash, {
+    navigate(__PATH_PREFIX__ + window.page.path + window.location.search + window.location.hash, {
       replace: true,
     })
   }

This fixed it for me

[davidbailey00]

@kishba @ahinrichs Sorry, this was my fault for not checking prefixes with a different bug fix - there's PR #7871 which fixes this, which should be merged shortly :)

[asistapl]

Thank you guys, you're awesome!