Docz: Is the entire component tree, including the wrapper, supposed to re-render on every url change or hot module reload?

[jwdinker]

Question

Is the entire component tree, including the wrapper.js, supposed to re-render on every url change or hot module reload?

Description
I keep receiving the error 'Cannot read property 'route' of undefined' on hot module changes because I suspect my wrapper component is returning null while I wait for my provider component in my wrapper.js to a load script in the head. Furthermore, the same auth request from my wrapper js file runs as well which isn't ideal. Is there any work around for this?

[selbekk]

Just wanted to stop by saying I get this cannot read property 'route' of undefined a lot during development as well.

What's this wrapper.js file you're talking about?

[theo-mesnil]

I have the same issue, i want to keep the theme property on all my pages, but when i change page i loose my state.

Here my index.js on gatsby-theme-docz

const Theme = ({ children }) => {
  const menus = useMenus()
  const [themeWUI, setThemeWUI] = useState('welcomekit')

  return (
    <ThemeProvider theme={createTheme(themeOptions(themeWUI))}>
      <ComponentsProvider components={components}>
        <Page>
          <Helmet>
            <link
              href="https://wh-front-production.s3-eu-west-1.amazonaws.com/production/home/assets/favicon.png"
              rel="shortcut icon"
              type="image/png"
            />
            <link
              href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"
              rel="stylesheet"
            />
            <link
              href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
              rel="stylesheet"
            />
          </Helmet>
          <GlobalStyle />
          <Menu
            display={{ xs: 'none', lg: 'flex' }}
            items={menus}
            theme={{ setTheme: setThemeWUI, value: themeWUI }}
          />
          <Content>{children}</Content>
        </Page>
      </ComponentsProvider>
    </ThemeProvider>
  )
}

export default theme()(Theme)

[jwdinker]

Just wanted to stop by saying I get this cannot read property 'route' of undefined a lot during development as well.

What's this wrapper.js file you're talking about?

@selbekk https://www.docz.site/docs/add-favicon-and-metadata

@theo-mesnil Yeah the constant rerendering is a pain as it causes all sorts of issues for me. Storybook does the same thing.

[rakannimer]

Hey @jwdinker, @theo-mesnil

Thanks for reporting this issue.

I keep receiving the error 'Cannot read property 'route' of undefined' on hot module changes

This should be fixed by this commit and will be released with the next release.

Is the entire component tree, including the wrapper.js, supposed to re-render on every url change or hot module reload?

To my understanding yes it does. Since docz uses Gatsby it's creating a static website with individual independent pages so state between them does not persist.

However you could solve this by using localStorage if I'm not mistaken.

For example using @theo-mesnil's example :

const useStateWithLocalStorage = (defaultValue) => {
  const defaultOrSaved = (window && localStorage.getItem("themeWUI")) || defaultValue
  const [themeWUI, setThemeWUI] = useState(defaultOrSaved)
  const setAndPersistThemeWUI = (val) => {
    setThemeWUI(val)
    localStorage.setItem("themeWUI", val)
  }
  return [themeWUI, setAndPersistThemeWUI]
}
const Theme = ({ children }) => {
  const menus = useMenus()
  const [themeWUI, setThemeWUI] = useStateWithLocalStorage('welcomekit')

  return (
    <ThemeProvider theme={createTheme(themeOptions(themeWUI))}>
      <ComponentsProvider components={components}>
        <Page>
          <Helmet>
            <link
              href="https://wh-front-production.s3-eu-west-1.amazonaws.com/production/home/assets/favicon.png"
              rel="shortcut icon"
              type="image/png"
            />
            <link
              href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"
              rel="stylesheet"
            />
            <link
              href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
              rel="stylesheet"
            />
          </Helmet>
          <GlobalStyle />
          <Menu
            display={{ xs: 'none', lg: 'flex' }}
            items={menus}
            theme={{ setTheme: setThemeWUI, value: themeWUI }}
          />
          <Content>{children}</Content>
        </Page>
      </ComponentsProvider>
    </ThemeProvider>
  )
}

export default theme()(Theme)

Does that solve your use-case ?

[theo-mesnil]

Thanks @rakannimer, it works 🤩

[theo-mesnil]

And for information, i added for the ssr the check if window exist before call localstorage :)

[stale[bot]]

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