fix(docz): crash using suspense

core/docz/src/components/AsyncRoute.tsx

@@ -1,15 +1,20 @@
 import * as React from 'react'
 import { SFC } from 'react'
 import { get } from 'lodash/fp'
-import { lazy } from '@loadable/component'
+import loadable from '@loadable/component'
 
 import { Entry } from '../state'
 import { useComponents, ComponentsMap } from '../hooks/useComponents'
 import { AsyncComponent } from './AsyncComponent'
 
 export type Imports = Record<string, () => Promise<any>>
-export const loadRoute = (path: string, imports: Imports) => {
-  return lazy(async () => {
+export const loadRoute = (
+  path: string,
+  imports: Imports,
+  components: ComponentsMap
+) => {
+  const Loading: any = components.loading
+  const fn = async () => {
     const importFn = get(path, imports)
     const { default: Component, getInitialProps } = await importFn()
     const ExportedComponent: SFC<any> = props => (
@@ -21,7 +26,8 @@ export const loadRoute = (path: string, imports: Imports) => {
     )
 
     return ExportedComponent
-  })
+  }
+  return loadable(fn, { fallback: <Loading /> })
 }
 
 interface AsyncRouteProps {

core/docz/src/components/Routes.tsx

@@ -32,7 +32,6 @@ export const Routes: SFC<RoutesProps> = ({ imports }) => {
   const { entries } = useContext(doczState.context)
 
   const NotFound: any = components.notFound
-  const Loading: any = components.loading
   const history = useMemo(() => createHistory(window as any), [])
 
   useEffect(() => {
@@ -42,26 +41,24 @@ export const Routes: SFC<RoutesProps> = ({ imports }) => {
   return (
     <MDXProvider components={components}>
       <LocationProvider history={history}>
-        <React.Suspense fallback={<Loading />}>
-          <Router>
-            <NotFound default />
-            {entries &&
-              entries.map(({ key: path, value: entry }) => {
-                const props = { path, entries, components }
-                const component = loadRoute(path, imports)
+        <Router>
+          <NotFound default />
+          {entries &&
+            entries.map(({ key: path, value: entry }) => {
+              const props = { path, entries, components }
+              const component = loadRoute(path, imports, components)
 
-                return (
-                  <AsyncRoute
-                    {...props}
-                    entry={entry}
-                    key={entry.id}
-                    path={entry.route}
-                    asyncComponent={component}
-                  />
-                )
-              })}
-          </Router>
-        </React.Suspense>
+              return (
+                <AsyncRoute
+                  {...props}
+                  entry={entry}
+                  key={entry.id}
+                  path={entry.route}
+                  asyncComponent={component}
+                />
+              )
+            })}
+        </Router>
       </LocationProvider>
     </MDXProvider>
   )

core/gatsby-theme-docz/src/node/createPages.js

@@ -25,7 +25,7 @@ const ENTRIES_QUERY = `
 `
 
 module.exports = ({ graphql, actions }, opts) => {
-  const { paths, ...config } = getDoczConfig(opts)
+  const { paths } = getDoczConfig(opts)
 
   return graphql(ENTRIES_QUERY).then(({ data, errors }) => {
     const hasErrors = errors && errors.length > 0