Client-side pages with path params fail on Windows

[bartosjiri]

Description

Creating client-side pages with path match parameters fails on Windows because of invalid path characters (:):

Error: C:\Users\[redacted]\public\page-data\path\:param contains invalid WIN32 path characters.

Steps to reproduce:

1. Create a client-side page configuration in the gatsby-node.js file:

   exports.createPages = async ({actions}) => {
     const {createPage} = actions
   
     createPage({
       path: '/path/:param',
       matchPath: '/path/:param',
       component: require.resolve('./src/templates/PageTemplate.js')
     })
   }
   

2. Create a template for the given page in src/templates/PageTemplate.js:

   import React from 'react'
   
   const PageTemplate = ({param}) => (
     <h1>{param}</h1>
   )
   
   export default PageTemplate
   

3. Run gatsby develop to build the project on a Windows machine.
4. Visit http://localhost:8000/path/1 (if the process hasn't failed yet).

Expected result

• Ability to visit http://localhost:8000/path/1 and see the provided parameter (1)

Actual result

(refer to issue description)

Environment

System:
  System:
    OS: Windows 10 10.0.19041        
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    gatsby: ^3.6.2 => 3.6.2 
  npmGlobalPackages:
    gatsby-cli: 3.6.0

References

• Reproduction setup

[KyleAMathews]

Hmm does this same bug occur if you make the route like src/pages/path/[id].js ?

https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#creating-client-only-routes

[bartosjiri]

Hmm does this same bug occur if you make the route like src/pages/path/[id].js ?

https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#creating-client-only-routes

No, works perfectly, thank you @KyleAMathews!

[KyleAMathews]

Ok good to know. The other way should work as well so we should fix it.