Intermittent dynamic route error

Are you reporting a bug?

Yes

I have a single non-static /admin route.

Like this commenter on Spectrum describes, I’m seeing an error (sometimes) when loading the admin route:

Uncaught (in promise) TypeError: Cannot set property 'templateLoaded' of undefined

I can navigate successfully on client, and load page from server. Every so often upon a reload of the app, then navigating to /admin I see that error.

The Spectrum comment is addressing something else with more complex dynamic routes. But mine is a single route, as per the non-static route example, showing the same error.

Caching bug? Race condition?

Location of error:

https://github.com/nozzle/react-static/blob/63e2eb69ffc47263cf3e6de504d9778063f7ae29/src/client/methods.js#L209

Environment

1. react-static -v: 5.9.7
2. node -v: v9.11.1
3. yarn --version or npm -v: npm: 6.1.0
4. Operating system: macOS Sierra 10.12.6
5. Browser and version (if relevant): Chrome 69.0.3472.3

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

1. Load app, any route (/admin should work)
2. Navigate around, works
3. Reload app… sometimes client navigation to /admin produces error above.

static.config.js

getRoutes: async () => {
    const value = await admin
      .database()
      .ref('health')
      .once('value')
      .then(snap => snap.val())
    // const snap = await snapPromise
    console.log({ value })
    const membersLoad = loadEntity('members')
    const eventsLoad = loadEntity('events')
    const linksLoad = loadEntity('links')

    const [members, events, links] = await Promise.all([
      membersLoad,
      eventsLoad,
      linksLoad,
    ])

    return [
      {
        path: '/',
        component: 'src/containers/Events',
        getData: () => ({ events }),
      },
      {
        path: '/members',
        component: 'src/containers/Members',
        getData: () => ({ members }),
      },
      {
        path: '/links',
        component: 'src/containers/Links',
        getData: () => ({ links }),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },

App.js

const Admin = universal(() => import('../containers/Admin'))
const App = () => (
  <Router>
    <div id="app">
      <Header />
      <div id="content">
        <Switch>
          <Route path="/admin" component={Admin} />
          <Routes />
        </Switch>
      </div>
    </div>
  </Router>
)

Admin.js

import React from 'react'
import { AuthConsumer, AuthProvider } from '../components/Auth'

class Admin extends React.Component {
  render() {
    return (
      <div
        css={`
          margin-top: 2em;
        `}
      >
        <AuthProvider>
          <AuthConsumer>
            {({ user, signOut }) => {
              return (
                <div>
                  <ul>
                    <li>{user.email}</li>
                    <li>{user.displayName}</li>
                  </ul>
                  <pre>{JSON.stringify({ user }, null, 2)}</pre>
                  <button onClick={signOut}>Sign Out</button>
                </div>
              )
            }}
          </AuthConsumer>
        </AuthProvider>
      </div>
    )
  }
}

export default Admin

Expected Behavior

Always works, error never shows.

[cmontgomerymt]

Any updates on how to handle this? I have this issue in v6.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity in 7 days. It will be closed if no further activity occurs. Thank you for your contributions.