Gatsby's matchPath still does not work as expected after v2.9.0

[wiziple]

Description

👋 I'm filing an ongoing issue on behalf of gatsby-plugin-intl users since some people are keep asking me about the reason.
This issue happens since gatsby@2.9.0 and still happens on the latest version of gatsby@2.10.4.

The matchPath does not work as expected or at least it used to be. There was a related fix to solve some issues on the gatsby@2.10.4, but it still has some issues described below.

Steps to reproduce

In order to describe as simply as possible, I'm going to use an official example and document.
https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/

I cloned gatsby-starter-default and followed the simple steps on the instruction above, then created pages/en/hello.js and pages/de/hello.js files.

[Repo] https://github.com/wiziple/gatsby-example-matchpath
[Netlify Build] https://sleepy-austin-39aafc.netlify.com

Expected result

https://sleepy-austin-39aafc.netlify.com/en/hello/ should render pages/en/hello.js
https://sleepy-austin-39aafc.netlify.com/de/hello/ should render pages/de/hello.js

Actual result

https://sleepy-austin-39aafc.netlify.com/en/hello/ renders pages/en/404.js
https://sleepy-austin-39aafc.netlify.com/de/hello/ renders pages/de/404.js

Environment

System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.100
Safari: 12.0.3
npmPackages:
gatsby: ^2.10.4 => 2.10.4
gatsby-image: ^2.2.1 => 2.2.3
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.1 => 2.2.1
gatsby-source-filesystem: ^2.1.0 => 2.1.0
gatsby-transformer-sharp: ^2.2.0 => 2.2.0

[rchrdnsh]

I am one of those users and I can confirm that I am running 2.10.4 and still having the same issue.

I ran gatsby info on my app:

System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.10.4 => 2.10.4
    gatsby-cli: ^2.7.2 => 2.7.2
    gatsby-image: ^2.2.3 => 2.2.3
    gatsby-mdx: ^0.6.3 => 0.6.3
    gatsby-plugin-intl: ^0.2.4 => 0.2.4
    gatsby-plugin-layout: ^1.1.0 => 1.1.0
    gatsby-plugin-manifest: ^2.2.0 => 2.2.0
    gatsby-plugin-netlify: ^2.1.0 => 2.1.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.1 => 2.2.1
    gatsby-plugin-styled-components: ^3.1.0 => 3.1.0
    gatsby-plugin-twitter: ^2.1.0 => 2.1.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.1.0 => 2.1.0
    gatsby-source-instagram: ^0.5.0 => 0.5.0
    gatsby-transformer-remark: ^2.5.0 => 2.5.0
    gatsby-transformer-sharp: ^2.2.0 => 2.2.0
    gatsby-transformer-yaml: ^2.2.0 => 2.2.0
  npmGlobalPackages:
    gatsby-cli: 2.7.0

...and deleted the cache, package-lock and npm modules, then re-installed all of them again, then ran the site, and the problem of the router not working for me is still persisting.

If your team has a moment, maybe you can take a look at the repo and see if you can spot anything that I might still be doing wrong?

https://github.com/arrowgtp/alma

Also, here is the URL of the latest build pushed to Netlify:

www.alma.vacations

[visualcookie]

Is there an update on this? I really need to update Gatsby now due to an issue I'm facing now with eslint-config-react-app.

facebook/create-react-app#7284

[manuelbieh]

Came here because I have the same issue.
Repo + Branch to reproduce:
https://github.com/manuelbieh/manuelbieh.de/tree/dependency-upgrade-jul-19

Lines that break the page (= only shows 404 pages (but hey, at least localized!))
https://github.com/manuelbieh/manuelbieh.de/blob/dependency-upgrade-jul-19/gatsby-node.js#L67

[simonjoom]

I'm not sure if it s can help, for me i used to patch the code of internal-plugins/internal-data-bridge/gatsby-node.js.
I checked the new gatsby code and nothing was changed in this file. so it should to work for it as well.. for me i resolved my matchpath problem patching like that: (but not sure if it's can help in the case of wiziple

around line 136 add a test on matchPath

  const pp=page.matchPath?page.matchPath+page.path : page.path;

  createNode(Object.assign({}, pageWithoutUpdated, {
    id: createPageId(pp),

this will create a new page different for a using matchpath if its exist so that gatsby can find it.

query-runner/redux/reducers/pages.js:

as well in reducer page.js add to help gatsby to find it
        state.set(action.payload.matchPath?action.payload.matchPath+page.path:action.payload.path, action.payload);

Nota i tested in my case, and did not test all case with /*

[wiziple]

I checked the recent version and the issue has been resolved.
Thanks, Gatsby team!