[client-only-path] is broken

[m4rrc0]

gatsby 1.8.1

Basically React-Router navigation is broken. The index Route (so the Route with path = name of page where the router is defined) is fine but we get into trouble when navigating to sub-routes.

With the client-only-path example, the index page shows up when we navigate to sub-routes which is probably why the example site does not fail at first look (when only the index page is defined and all routes start there).

On my website on the other hand I either land on the dev-404-page or I get the following error when navigating to sub-routes:

TypeError: Cannot read property 'layout' of undefined
LayoutRenderer.render
webpack:///.cache/layout-renderer.js:95
LayoutRenderer.render
webpack:///~/react-proxy/modules/createPrototypeProxy.js:44
http://localhost:8000/commons.js:88142:22
measureLifeCyclePerf
webpack:///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
webpack:///~/react-dom/lib/ReactCompositeComponent.js:794
ReactCompositeComponentWrapper._renderValidatedComponent
webpack:///~/react-dom/lib/ReactCompositeComponent.js:821
ReactCompositeComponentWrapper.performInitialMount
webpack:///~/react-dom/lib/ReactCompositeComponent.js:361
ReactCompositeComponentWrapper.mountComponent
webpack:///~/react-dom/lib/ReactCompositeComponent.js:257
Object.mountComponent
webpack:///~/react-dom/lib/ReactReconciler.js:45
ReactCompositeComponentWrapper.performInitialMount
webpack:///~/react-dom/lib/ReactCompositeComponent.js:370

To reproduce with gatsby example site:

1. take client-only-path example
2. rename page 'index' to 'app'
3. create an index page

import React from "react"
import Link from "gatsby-link"
export default () => <Link to="/app/">GO TO APP</Link>

4. Replace the class in the app page by

class AnimationExample extends React.Component {
  render() {
    return (
      <div style={{ position: `relative`, minHeight: `80vh` }}>
        <Route
          render={({ location }) =>
            <div style={styles.fill}>
              <Route
                exact
                path="/app/redir/"
                render={() => <Redirect to="/app/10/90/50" />}
              />
              <ul style={styles.nav}>
                <NavLink to="/app/10/90/50">Red</NavLink>
                <NavLink to="/app/120/100/40">Green</NavLink>
                <NavLink to="/app/200/100/40">Blue</NavLink>
                <NavLink to="/app/310/100/50">Pink</NavLink>
              </ul>
              <div style={styles.content}>
                <Route
                  location={location}
                  key={location.key}
                  path="/app/:h/:s/:l"
                  component={HSL}
                />
              </div>
            </div>}
        />
      </div>
    )
  }
}

5. gatsby develop

[m4rrc0]

I have been having trouble with client only routes for some time. I am not sure if it was related to gatsby or some funky stuff I was trying so I don't know which version of Gatsby to go back to.

I'd be grateful if someone can point me to a safe package combo.

[m4rrc0]

oh and I just remembered that maybe we have to pass the location from the layout down to pages but when we do, we get:

TypeError: Cannot read property 'listen' of undefined
attachToHistory
webpack:///.cache/root.js:65
render
webpack:///.cache/root.js:140
Route.render
webpack:///~/react-router/Route.js:117
http://localhost:8000/commons.js:23088:22
measureLifeCyclePerf
webpack:///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
webpack:///~/react-dom/lib/ReactCompositeComponent.js:794
ReactCompositeComponentWrapper._renderValidatedComponent
webpack:///~/react-dom/lib/ReactCompositeComponent.js:821
ReactCompositeComponentWrapper.performInitialMount
webpack:///~/react-dom/lib/ReactCompositeComponent.js:361
ReactCompositeComponentWrapper.mountComponent
webpack:///~/react-dom/lib/ReactCompositeComponent.js:257
Object.mountComponent
webpack:///~/react-dom/lib/ReactReconciler.js:45

[m4rrc0]

Wow I am dumb! I just figured that my gatsby-node got messed up in the dances of git merges.

So, problem solved. Really sorry for the written pollution. =/

For reference in case someone land here, the solution is right in the docs: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes