Path prefix does not work when page URL starts with path prefix

Description

Path prefix (https://www.gatsbyjs.com/docs/path-prefix/) does not work when page URL starts with path prefix. For example, if path prefix is /blog and page’s URL is blog, navigating to /blog/blog does not work.

This can be demonstrated in:

https://gatsby-path-prefix-bug.netlify.app/blog/blog/

(page works with Javascript disabled, but not with Javascript enabled)

Working example of path prefix can be found in:

https://gatsby-path-prefix-bug.netlify.app/blog/

Steps to reproduce

1. npx gatsby new gatsby-path-prefix-bug https://github.com/gatsbyjs/gatsby-starter-hello-world
2. cd gatsby-path-prefix-bug
3. cp src/pages/index.js src/pages/blog.js
4. Edit gatsby-config.js to contain module.exports = { pathPrefix: "/blog" }
5. npx gatsby build --prefix-paths && npx gatsby serve --prefix-paths
6. Open http://localhost:9000/blog/blog

Expected result

“Hello world!” text should be seen

Actual result

“Hello world!” text is seen for a while and then a blank page is seen

Environment

System: OS: Windows 10 10.0.19041 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Binaries: Node: 12.16.3 - C:\Program Files\nodejs\node.EXE npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD Languages: Python: 3.8.3 - C:\Python38\python.EXE Browsers: Chrome: 86.0.4240.75 Edge: Spartan (44.19041.423.0), Chromium (86.0.622.48) npmPackages: gatsby: ^2.24.79 => 2.24.79

[ascorbic]

Thanks for the detailed report. This seems to be because we’re calling trimPathname more than once on a path. Looking at the network tab, it’s requesting page data from index instead of /blog/. @im-adithya if you feel up to it, the relevant code is in packages/gatsby/cache-dir/find-path.js. You’d need to work out where it’s being called and why it’s being called more than once. You’ll find details here on how to get set up. https://www.gatsbyjs.com/contributing/code-contributions/

[koxu1996]

I stumbled upon this and spend few hours investigating problem. Let’s analyze this bug for my case:

1. Here findPath('/blog/blog/here-be-dragons') is called, which calls trimPathname underneath:
   https://github.com/gatsbyjs/gatsby/blob/54d4721462b9303fed723fdcb15ac5d72e103778/packages/gatsby/cache-dir/loader.js#L402 Return value: /blog/here-be-dragons

2. Then doPrefetch('/blog/here-be-dragons') is called: https://github.com/gatsbyjs/gatsby/blob/54d4721462b9303fed723fdcb15ac5d72e103778/packages/gatsby/cache-dir/loader.js#L405

3. Then loadPageDataJson('/blog/here-be-dragons') is called, which calls findPath (and trimPath underneath) again: https://github.com/gatsbyjs/gatsby/blob/54d4721462b9303fed723fdcb15ac5d72e103778/packages/gatsby/cache-dir/loader.js#L191

As a result /blog is trimmed twice and we get /here-be-dragons URL, therefore 404 errors.