Docz: Playground component not rendering any content

[alxhghs]

Bug Report

Playground component is not rendering any content.

To Reproduce

1. Build and run this example https://github.com/doczjs/docz/tree/master/examples/basic
2. Go to http://localhost:3000/src-components-alert

Expected behavior

Expect to see a preview of the Alert component

Environment

• docz version: latest
• OS: OSX 10.15.5
• Node/npm version: Node 10.16.3/npm 6.9.0

Additional context/Screenshots

[xiaobaiha]

same problem

[maxval1]

same problem

[alinazamorskaya]

Same issue.

[lucasga]

Same issue here :/

[adamkudrna]

It seems to be a problem with dependencies – in my case, updating everything to their latest versions helped: https://github.com/react-ui-org/react-ui/commit/cba01dc757ce95da2f655ad069f4555a0aa9eaef. I'm not sure what _exactly_ was the problem — but it works now.

[chrisrzhou]

Oh wow, I just came across this issue as well!

Bug/Behaviors

• Playground does not render either the code preview or the component preview. It's blank for both windows.
• Props still works fine.
• Rendering JSX/component outside of Playground still works.

Context

My project has been working fine with [email protected] in the past few days/weeks so I'm not sure what could have changed if my dependencies did not change! I've removed node_modules and package-lock.json at various points, so is that a possible reason for dependencies in the lockfile changing when reinstalling?

Reproduce

• OSX 10.15.6
• docz@^2.3.1
• node@^12.18.0
• npm@^6.14.4

git clone [email protected]:chrisrzhou/react-wordcloud

cd react-wordcloud
npm install && npm run docs

Navigate to any page in the Usage menu.

What is super weird is:

The same code + environment ([email protected] + [email protected]) + npm build scripts (docz build) + dependencies leads to docs that work fine in Netlify but not locally:

• Works fine in netlify: https://react-wordcloud.netlify.app/usage/size
• No content in playground locally: localhost:3000/usage/size

I'm interested to understanding the root cause or a potential fix so I'm aware of similar issues in the future!

[mhxbe]

A colleague & myself were also struggling with empty Playgrounds. Here are our findings.

NPM (Error ❌ empty Playgrounds)

rm -rf node_modules package-lock.json .docz
npm cache clean --force
npm install
npm run dev # docz dev

Yarn (Success ✅ )

rm -rf node_modules yarn.lock .docz
yarn cache clean
yarn
yarn dev # docz dev

Possible cause

We have inspected and compared some dependencies between the npm & yarn install and I think the @mdx-js/mdx-dependency is the culprit.

• yarn installs 1.6.16
• npm installs 2.0.0-next.7

We have tested the yarn-approach successfully on:

• Mac OSx 10.15.6 with NodeJS 14.5.0
• Windows 10 with NodeJS 12.14.0
  On both devices, yarn installed @mdx-js/[email protected] whereas npm installed @mdx-js/mdx2.0.0-next.7

[jovanajevtic9]

@alxhghs same issue, any luck?

[chrisrzhou]

@mhxbe, that's awesome debugging and I can confirm your findings. I confirm that reinstalling clean doesn't fix anything if we naturally run npm install, and this installs with @mdx-js/[email protected].

A hotfix can be done by adding "@mdx-js/mdx": "^1.6.16" explicitly as a dev dependency.

• Removed node_modules, package-lock.json
• Add "@mdx-js/mdx": "^1.6.16" explicitly as a dev dependency.
• npm install
• npm run docz dev
• Playgrounds work now.

While this works, it's a hack and the hotfix doesn't really make sense even though it works because if you checked through the lockfile grepping for mdx-js, you'll realize that:

• gatsby-interface and remark-mdxjs require @2.0.0-* dependencies
• docz itself seems to require @1.6* dependencies.

It seems that these maybe gatsby dependencies related. If the project maintainers can address the underlying dependencies so clean installs can work without needing knowledge of nested dependencies, that would be great!

[jovanajevtic9]

This is actually working, thanks. But im still getting undefined errors and then when i delete a docz from package.json and install it again and remove node_modules it works again, but this is some other issue i'll post it somewhere else

[techdev5521]

I was able to get this working and also hope the maintainers are able to address the dependency chain issues.

[citius]

nor props, nor playground doesn't work for me =(

MacOS: 10.15.6 (19G2021)
NodeJS: v14.5.0
docz: ^2.3.1

Components are written on TypeScript

/docs/components/test.mdx:

---
name: Button
route: /components/test
menu: 2. Components
---

# Test

import { Props, Playground } from 'docz';
import Test from '../../src/components/Test';

<Props of={Test} />

<Playground>
  <Test>Click me</Test>
</Playground>

/doczrc.js

export default {
  src: './docs',
  base: './docs',
  typescript: true,
};

[davidlgj]

Same issue here!

Just started using docz and the Playground was the main feature I wanted.
Props does work for me though.

[citius]

@chrisrzhou thanks a lot for a working solution.

[mario528]

same problem，looking forward to the author fixing this problem.
thx