Skip to content
This repository has been archived by the owner on Jan 24, 2025. It is now read-only.

gatsby-theme-docz v2 build broken #985

Closed
marcuslindfeldt opened this issue Jul 29, 2019 · 11 comments
Closed

gatsby-theme-docz v2 build broken #985

marcuslindfeldt opened this issue Jul 29, 2019 · 11 comments
Labels
bug Something isn't working pending-release Issue fixed but not published to npm yet v2

Comments

@marcuslindfeldt
Copy link

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
@ivan-dalmet ivan-dalmet added the v2 label Jul 30, 2019
@MobliMic
Copy link

MobliMic commented Aug 1, 2019

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

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

@kaxium
Copy link

kaxium commented Aug 2, 2019

I'm getting similar issues...so sad

@pigmanbear
Copy link

pigmanbear commented Aug 5, 2019

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
Copy link

kaxium commented Aug 6, 2019

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
Copy link

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
Copy link

kaxium commented Aug 10, 2019

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
Copy link

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
Copy link

@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
Copy link

JosephScript commented Aug 12, 2019

@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
Copy link
Contributor

Should be fixed by #1023

@molebox
Copy link

molebox commented Aug 26, 2019

Should be fixed by #1023

Get that bad boy merged yo!

@rakannimer rakannimer added bug Something isn't working pending-release Issue fixed but not published to npm yet labels Aug 27, 2019
amprew pushed a commit to amprew/docz that referenced this issue Oct 3, 2019
* fix(gatsby-theme-docz): add missing source sans pro font (doczjs#991)

* fix(gatsby-theme-docz): replace fragment tag to the short syntax (doczjs#992)

* fix(docz-example-basic): add explicit dependency to scheduler

* fix(docz): make scheduler dependency explicit

* docs(docz-example-basic): add instructions to quickly run the example

* fix(docz-example-typescript): add scheduler dep and docs doczjs#1020

* fix(docz-example-typescript): add scheduler dep and docs

* fix(docz-example-flow): add @babel/preset-flow with onCreateBabelConfig

* docs(docz-example-flow): add setup instructions

* Fix flow example, add setup doc (doczjs#1021)

* fix(docz-example-basic): add explicit dependency to scheduler

* fix(docz): make scheduler dependency explicit

* docs(docz-example-basic): add instructions to quickly run the example

* fix(docz-example-typescript): add scheduler dep and docs

* fix(docz-example-flow): add @babel/preset-flow with onCreateBabelConfig

* docs(docz-example-flow): add setup instructions

* Update Gatsby example (doczjs#1022)

* fix(docz-example-basic): add explicit dependency to scheduler

* fix(docz): make scheduler dependency explicit

* docs(docz-example-basic): add instructions to quickly run the example

* fix(docz-example-typescript): add scheduler dep and docs

* fix(docz-example-flow): add @babel/preset-flow with onCreateBabelConfig

* docs(docz-example-flow): add setup instructions

* fix(docz-example-gatsby): make gatsby example runnable outside repo

* docs(docz-example-gatsby): add setup instructions

* fix(docz): remove window check from useCurrentDoc fixes doczjs#985 (doczjs#1023)

* feat(docz-core): setup jest and add first test

* test(docz): add tests for states.config and states.entries

* ci(docz): add circleci tests (doczjs#1027)

* fix(gatsby-theme-docz): fix minor linting issue

* feat(docz): add circleci

* chore(docz): add bootstrap to ci

* ci(docz): clear cache

* ci(docz): add build step to install

* ci(docz): build only

* ci(docz-core): try without build

* ci(docz-core): remove __tests__ from include

* ci(docz-core): add build

* ci(docz-core): back to packages

* fix(docz-example-typescript): add externally usable tsconfig

* fix(docz-example-typescript): add extension of tsx file in mdx

* docs(docz): add link to v1

* docs(docz): add create-docz-app to examples

* fix(docz-example-flow): add scheduler dep

* fix(docz-example-styled-components): add scheduler and remove caaf

* docs(docz-example-react-native): add scheduler temp

* docs(docz-example-images): add scheduler temp

* fix(docz-core): wait for app to be ready before opening the browser

* fix(docz-core): extend base config instead of overwriting user config (doczjs#1028)

* chore(docz-core): typo

* chore(docz): bump version to 2.0.0-rc.2

* test(docz): loosen up test temporarily

* chore(docz-core): prefix scripts with yarn

* chore(docz): add release:next script

* chore(docz): lerna version fix

* v2.0.0-rc.2

* chore(docz): bump to 2.0.0-rc.3

* 2.0.0-rc.4

* 2.0.0-rc.5
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working pending-release Issue fixed but not published to npm yet v2
Projects
None yet
Development

No branches or pull requests

9 participants