Docz: Fresh install not working, missing dependencies

[whoisryosuke]

Bug Report

Docz doesn't spin up dev server after a fresh install.

To Reproduce

Here's an example repo. Install and run yarn docz dev

To reproduce from scratch:

1. Clone Grommet component library: git clone https://github.com/grommet/grommet.git
2. Install yarn add docz --dev
3. Create a MDX file at src/js/components/Button/Button.mdx

---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import { Button } from './'

# Button

<Props of={Button} />

## Basic usage

<Playground>
  <Button>Click me</Button>
  <Button kind="secondary">Click me</Button>
</Playground>

1. Run npm run docz dev
2. See error in console

yarn run v1.21.1
$ /Users/ryosuke/Development/References/grommet/node_modules/.bin/docz dev

Building app
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use

 ERROR #10226  CONFIG

Couldn't find the "gatsby-plugin-emotion" plugin declared in "/Users/ryosuke/Development/References/grommet/node_modules/gatsby-theme-docz/gatsby-config.js".

Tried looking for an installed package in the following paths:
 - /Users/ryosuke/Development/References/grommet/node_modules/gatsby/dist/bootstrap/load-themes/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/References/grommet/node_modules/gatsby/dist/bootstrap/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/References/grommet/node_modules/gatsby/dist/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/References/grommet/node_modules/gatsby/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/References/grommet/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/References/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/Development/node_modules/gatsby-plugin-emotion
 - /Users/ryosuke/node_modules/gatsby-plugin-emotion
 - /Users/node_modules/gatsby-plugin-emotion
 - /node_modules/gatsby-plugin-emotion

not finished open and validate gatsby-configs - 1.766s

Expected behavior

Install and run dev server.

Environment

• docz version: ^2.2.0
• OS: 10.14
• Node/npm version: 6.13.1

Additional context/Screenshots

Tried to npm install inside the .docz directory that gets created but realized that it's a fake package.json?

I installed gatsby-plugin-emotion separately into the Grommet project and tried re-running the docs. The process runs more successfully, running the actual Gatsby build process (you can see the various stages of it in the console), but then it produces a continuous/recursive error that repeats itself infinitely until you stop the app (something about MDX):

 ERROR #11321  PLUGIN

"gatsby-plugin-mdx" threw an error while running the onCreatePage lifecycle:

Property value expected type of string but got null



  TypeError: Property value expected type of string but got null

  - utils.js:164 Object.validate
    [grommet]/[@babel]/types/lib/definitions/utils.js:164:13

  - validate.js:22 validateField
    [grommet]/[@babel]/types/lib/validators/validate.js:22:9

  - validate.js:16 validate
    [grommet]/[@babel]/types/lib/validators/validate.js:16:3

  - builder.js:38 builder
    [grommet]/[@babel]/types/lib/builders/builder.js:38:27

  - index.js:346 Object.StringLiteral
    [grommet]/[@babel]/types/lib/builders/generated/index.js:346:31

  - index.js:95 imageToJsx
    [grommet]/[remark-docz]/dist/index.js:95:123

  - index.js:102 
    [grommet]/[remark-docz]/dist/index.js:102:18

  - index.js:27 overload
    [grommet]/[unist-util-visit]/index.js:27:12

  - index.js:34 one
    [grommet]/[unist-util-visit-parents]/index.js:34:25

  - index.js:57 all
    [grommet]/[unist-util-visit-parents]/index.js:57:16

  - index.js:42 one
    [grommet]/[unist-util-visit-parents]/index.js:42:28

  - index.js:57 all
    [grommet]/[unist-util-visit-parents]/index.js:57:16

  - index.js:42 one
    [grommet]/[unist-util-visit-parents]/index.js:42:28

  - index.js:57 all
    [grommet]/[unist-util-visit-parents]/index.js:57:16

  - index.js:42 one
    [grommet]/[unist-util-visit-parents]/index.js:42:28

  - index.js:26 visitParents
    [grommet]/[unist-util-visit-parents]/index.js:26:3


⠇ createPagesStatefully

[rakannimer]

Hey @whoisryosuke

Thanks for reporting this issue. I was able to reproduce the second one :

TypeError: Property value expected type of string but got null

This error is caused by the mdx parser choking on images without alt text in your markdown files or unterminated img tags, for example :

[![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Button&full=0&addons=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=button&module=%2Fsrc%2FButton.js)

It should definitely fail in a more helpful way. And we'll try to make sure it does.

It's hard to debug further without fixing the mdx error reporting problem first, I'll ping back here when it's fixed 👍

[whoisryosuke]

Thanks for the reply! Especially during the holidays ☃️👍

Good catch! I noticed a lot issues when using MDX + Gatsby with the grommet
repo. It was picking up markdown and failing to parse it into GraphQL. I
wasn’t seeing any errors for MDX so it was difficult to debug, appreciate
you spotting it 💪

On Mon, Dec 23, 2019 at 2:07 PM Rakan Nimer [e-mail]
wrote:

Hey @whoisryosuke https://github.com/whoisryosuke

Thanks for reporting this issue. I was able to reproduce the second one :

TypeError: Property value expected type of string but got null

This error is caused by the mdx parser choking on images without alt text
in your markdown files or unterminated img tags, for example :

It should definitely fail in a more helpful way. And we'll try to make
sure it does.

It's hard to debug further without fixing the mdx error reporting problem
first, I'll ping back here when it's fixed 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/doczjs/docz/issues/1337?email_source=notifications&email_token=AJBBJBK2Z7CB3H425TBE7NTQ2ED6NA5CNFSM4J6P5PCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRXTWA#issuecomment-568555992,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJBBJBJ2VYK3FKWHJ35C3C3Q2ED6NANCNFSM4J6P5PCA
.

[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.