doczjs / docz

✍ It has never been so easy to document your things!
https://docz.site
MIT License
23.62k stars 1.46k forks source link

build fail when use gatsby-plugin-layout plugin #1636

Open zhengpq opened 3 years ago

zhengpq commented 3 years ago

Bug Report

Describe the bug

Build fail when use gatsby-plugin-layout plugin

Detail To avoid the whole page reloading when the navigation changes , i add the gatsby plugin to the project, but get some error, like blow

gatsby-config.js file

module.exports = {
  plugins: [
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-plugin-layout',
    },
  ],
}

The error i got

image

According the error there is no layout component, so i shadow the layout component, but this time the hooks api go wrong. useCurrentDoc get undefineduseMenus get null

gatsby-config.js file

module.exports = {
  plugins: [
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-plugin-layout',
      options: {
        component: require.resolve('./src/gatsby-theme-docz/components/Layout/index'),
      },
    },
  ],
}

The directory of my project

image

The Layout component

import { Layout as AdLayout } from 'adui'
import { Header } from '../Header'
import { Sidebar } from '../Sidebar'
import { MainContainer } from '../MainContainer'
import { data } from '../MainContainer/index'
import { useCurrentDoc, useMenus } from 'docz'
import './styles.scss'

const Layout = ({ children }) => {
  console.log('docz api', useCurrentDoc(), useMenus())
  const nav = useRef()

  return (
    <div>
      {typeof document !== 'undefined' ? (
        <AdLayout data-testid="layout" className="layout">
          <AdLayout.Header affixed>
            <Header />
          </AdLayout.Header>
          <div style={{ display: 'flex' }}>
            <AdLayout.Aside
              affixed
              style={{ top: '86px', maxHeight: 'calc(100vh - 86px)' }}
            >
              <Sidebar ref={nav} />
            </AdLayout.Aside>
            <AdLayout.Main>
              <MainContainer data-testid="main-container">
                {children}
              </MainContainer>
            </AdLayout.Main>
          </div>
        </AdLayout>
      ) : null}
    </div>
  )
}

export default Layout

here is the console reuslt

image

By now, i find out that to avoid page reload when navigation changes in gatsby2 is adding the gatsby-plugin-layout plugin, is there any other way to solve this problem? If somebody knows, tell me please! Thanks!