Gatsby's internal router has issues with special characters

Question

I am experiencing an issue where I have a page with a matchPath set to /*.

This works for content that doesn't have special characters in the URL, such as my terms page. However, for my test page with special characters in the URL, it briefly loads (indicating that it has found the page properly), but then Gatsby (most likely the Reach Router) loads a 404 instead.

What could be the cause of this? I am unsure whether or not I have found a bug, or if I am doing something wrong.

I am using Gatsby 2.

Here's my package.json:

{
  "dependencies": {
    "@azure/core-http": "^1.2.3",
    "@babel/core": "^7.11.1",
    "@fluffy-spoon/name-of": "^1.4.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/styles": "^4.11.3",
    "@monaco-editor/react": "^3.6.2",
    "@nivo/line": "^0.63.1",
    "@reach/router": "^1.3.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@types/moment": "^2.13.0",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^4.2.0",
    "@typescript-eslint/parser": "^4.2.0",
    "acorn": "^7.4.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "blurhash": "^1.1.3",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "chart.js": "^2.9.3",
    "clipboard-copy": "^3.1.0",
    "devtools-detect": "^3.0.1",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.10.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.2",
    "eslint-plugin-react-hooks": "^4.1.2",
    "file-loader": "4.3.0",
    "file-saver": "^2.0.5",
    "fs-extra": "^8.1.0",
    "gatsby": "^2.27.0",
    "gatsby-image": "^2.6.0",
    "gatsby-plugin-create-client-paths": "^2.5.0",
    "gatsby-plugin-lodash": "^3.5.0",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-react-helmet": "^3.5.0",
    "gatsby-plugin-robots-txt": "^1.5.3",
    "gatsby-plugin-s3": "^0.3.8",
    "gatsby-plugin-sass": "^2.6.0",
    "gatsby-plugin-sharp": "^2.9.0",
    "gatsby-plugin-sitemap": "^2.7.0",
    "gatsby-plugin-styled-components": "^3.5.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-source-mongodb": "^2.5.0",
    "gatsby-transformer-remark": "^2.11.0",
    "gatsby-transformer-sharp": "^2.7.0",
    "google-map-react": "^2.1.9",
    "html-webpack-plugin": "4.0.0-beta.11",
    "i18next": "^19.7.0",
    "lodash": "^4.17.20",
    "materialui-daterange-picker": "^1.1.92",
    "mini-css-extract-plugin": "0.9.0",
    "moment": "^2.27.0",
    "monaco-react": "^1.1.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.13.1",
    "react-blurhash": "^0.1.3",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.2.0",
    "react-helmet": "^6.1.0",
    "react-hotkeys-hook": "^2.3.1",
    "react-i18next": "^11.7.2",
    "react-refresh": "^0.8.3",
    "resolve": "1.15.0",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^9.0.3",
    "stacktrace-js": "^2.0.2",
    "style-loader": "0.23.1",
    "styled-components": "^5.2.0",
    "terser-webpack-plugin": "2.3.4",
    "ts-pnp": "1.1.5",
    "url-loader": "2.3.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^2.1.0",
    "@cloudflare/wrangler": "^1.15.1",
    "@types/devtools-detect": "^3.0.0",
    "@types/file-saver": "^2.0.1",
    "@types/google-map-react": "^2.1.0",
    "@types/googlemaps": "^3.43.2",
    "@types/jest": "^26.0.14",
    "@types/lodash.debounce": "^4.0.6",
    "@types/react-helmet": "^6.1.0",
    "@types/stacktrace-js": "^2.0.3",
    "autorest": "^3.1.5",
    "babel-jest": "^26.3.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-styled-components": "^1.11.1",
    "babel-preset-gatsby": "^0.5.13",
    "bundlewatch": "^0.3.2",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-manifest": "^2.12.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-s3": "^0.3.5",
    "gatsby-plugin-scss-typescript": "^4.0.13",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.4.2",
    "node-sass": "^4.14.1",
    "react-scripts": "^3.4.3",
    "react-test-renderer": "^16.13.1",
    "sass": "^1.32.2",
    "shx": "^0.3.2",
    "typescript": "^4.1.3",
    "typescript-plugin-css-modules": "^2.7.0",
    "webpack": "^4.44.2"
  }
}

Damascene

could you provide details on how the page is generated or a minimal reproducible example repo? I try with the markdown example in the gatsby repo, but it is working fine with the same path you have github.com/diedu89/recipe-sourcing-markdown-unicode – Nereus

I forgot to mention that it's for Gatsby 2, not 3. So sorry! – Damascene

could you share your package.json dependencies to see the exact versions, just to make sure I can reproduce the issue – Nereus

Well, I downgrade the dependencies to an early 2.x version, and it still works. Could you check my repo to see what could be the difference with your code – Nereus

@Nereus shared the package.json now. – Damascene

I updated my dependencies to those versions, and it worked fine. I see you are using this plugin gatsby-plugin-create-client-paths. Could you explain why and how you are using it? it might have something to do with your issue – Nereus

Please post the code snippet. – Zingaro