Docz: gatsby-theme-docz v2 build broken

[marcuslindfeldt]

Bug Report

The build fails when running gatsby build on a gatsby site using the gatsby-theme-docz theme. Additionally several dependencies require manual installation.

gatsby-theme-docz/src/components/Header/index.js
The useCurrentDoc() hook in docz-core returns null if window does not exist.
The window will not be defined when running gatsby build and so it fails.

gatsby-theme-docz/src/components/NavLink/index.js
Same problem with useCurrentDoc() hook

And then there are several problems with theme styles like:

border: t => `1px solid ${t.colors.border}`,

which results in

WebpackError: TypeError: Cannot read property 'border' of undefined

[MobliMic]

I'm getting similar issues in Header too. Line 11 destructuring useCurrentDoc()

WebpackError: TypeError: Cannot destructure propertyeditof 'undefined' or 'null'.

[kaxium]

I'm getting similar issues...so sad

[pigmanbear]

Using component shadowing, this can be overcome with something along the lines of
(src/gatsyb-theme-docz/components/NavLink/index.js):

/** @jsx jsx */
import React from "react"
import { jsx } from "theme-ui"
import { Link } from "gatsby"
import { useDocs, useCurrentDoc } from "docz"
import { path } from "ramda"

import * as styles from "gatsby-theme-docz/src/components/NavLink/styles"

const getHeadings = (route, docs) => {
  const doc = docs.find(doc => doc.route === route)
  const headings = path(["headings"], doc)
  return headings ? headings.filter(heading => heading.depth === 2) : []
}

export const NavLink = ({ item, ...props }) => {
  if (typeof window !== "undefined") {
    const docs = useDocs()
    const to = item.route
    const headings = docs && getHeadings(to, docs)
    const current = useCurrentDoc()
    const isCurrent = item.route === current.route
    const showHeadings = isCurrent && headings && headings.length > 0
    const links = showHeadings
      ? headings.map(heading => (
          <Link
            key={heading.slug}
            to={`${to}#${heading.slug}`}
            sx={styles.smallLink}
            activeClassName="active"
          >
            {heading.value}
          </Link>
        ))
      : []

    return [
      <Link
        key={`linky-1`}
        {...props}
        to={to}
        sx={styles.link}
        activeClassName="active"
      />,
      ...links,
    ]
  } else {
    return null
  }
}

I also had to correct NavLink and SideBar due to a React ref error with React Fragment (thus the reason above for returning an array, same in the Sidebar component). Haven't had a chance yet to investigate further, but this is a quick fix.

[kaxium]

I solve this problem by alias of webpack.

//docz-proxy.js
import { doczState } from '@docz';
import { useContext } from 'react';
import _get from 'lodash/fp/get';

const isClient = typeof window === 'object';

export * from '@docz';
export const useCurrentDoc = () => {
    const state = useContext(doczState.context);
    return isClient ? _get('currentEntry.value', state) : {};
};

//gatsby-config.js
{
  resolve: 'gatsby-plugin-alias-imports',
  options: {
      alias: {
        ...
        'docz': path.resolve(__dirname, 'src/docz-proxy.js'),
        '@docz': require.resolve('docz')
      },
  },
}

[JosephScript]

Our build is failing as well:

   9 | export const Header = () => {
  10 |   const config = useConfig()
> 11 |   const { edit = true, ...doc } = useCurrentDoc()
     |   ^
  12 |   const [colorMode, setColorMode] = useColorMode()
  13 |
  14 |   const toggleColorMode = () => {


  WebpackError: TypeError: Cannot destructure property `edit` of 'undefined' or 'null'.

  - index.js:11 Header
    node_modules/gatsby-theme-docz/src/components/Header/index.js:11:3

  - cache.esm.js:217 Promise._execute
    node_modules/@emotion/cache/dist/cache.esm.js:217:1

  - stylis.esm.js:132 Promise._resolveFromExecutor
    [cache]/[@emotion]/stylis/dist/stylis.esm.js:132:1

Develop mode works fine, just trying to get a static build generated. I've tried the work around using an alias mentioned above but that isn't working.

[kaxium]

Our build is failing as well:

   9 | export const Header = () => {
  10 |   const config = useConfig()
> 11 |   const { edit = true, ...doc } = useCurrentDoc()
     |   ^
  12 |   const [colorMode, setColorMode] = useColorMode()
  13 |
  14 |   const toggleColorMode = () => {


  WebpackError: TypeError: Cannot destructure property `edit` of 'undefined' or 'null'.

  - index.js:11 Header
    node_modules/gatsby-theme-docz/src/components/Header/index.js:11:3

  - cache.esm.js:217 Promise._execute
    node_modules/@emotion/cache/dist/cache.esm.js:217:1

  - stylis.esm.js:132 Promise._resolveFromExecutor
    [cache]/[@emotion]/stylis/dist/stylis.esm.js:132:1

Develop mode works fine, just trying to get a static build generated. I've tried the work around using an alias mentioned above but that isn't working.

I need share the custom theme by npm, so I copied the theme of 'gatsby-theme-docz', added docz-proxy.js to the src doc and modified the alias of the gatsby-config.js. It can work.

[imdongchen]

I have a successful build by shadowing the components. Basically replacing Header and NavLink with a dummy component. However, the playground is rendered properly. Only the "code" part is rendered but the preview part is empty.

Checking console, it seems to load page-data.json from a wrong path. Say the page is /home. It should load /home/page-data.json but instead it does /index/page-data.json. Any idea?

[JosephScript]

@kaxium Gastby doesn't seem to work for me. I end up with new errors: Error: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type undefined

However I was able to use the work around by creating shadow components suggested by @pigmanbear for Header and NavLink by copy/pasting the components from source and adding empty objects where destructuring is failing (for example changing const { edit = true, ...doc } = useCurrentDoc() to useCurrentDoc() || {}), but I'm running into new errors that might be related to what @imdongchen is seeing. Playground isn't rendering the components, none of the navigation links work, and there is a console error:

Unhandled promise rejection TypeError: "this.loadPageDataJson(...).then(...).finally is not a function"
value loader.js:174
    <anonymous> production-app.js:120
    a es6.promise.js:75
    A es6.promise.js:92
    c _microtask.js:18
es6.promise.js:110
    t http://localhost:9000/app-a699c55fd390a949340b.js:1
    exports http://localhost:9000/app-a699c55fd390a949340b.js:1
    M http://localhost:9000/app-a699c55fd390a949340b.js:1
    exports http://localhost:9000/app-a699c55fd390a949340b.js:1
    <anonymous> http://localhost:9000/app-a699c55fd390a949340b.js:1
    g http://localhost:9000/app-a699c55fd390a949340b.js:1
    b http://localhost:9000/app-a699c55fd390a949340b.js:1

[JosephScript]

@kaxium I got your solution working (I had the docz-proxy.js in the wrong path), but still same error as my previous post. this.loadPageDataJson fails, the playground is broken and the links don't work.

[rakannimer]

Should be fixed by https://github.com/pedronauck/docz/pull/1023

[molebox]

Should be fixed by #1023

Get that bad boy merged yo!