docz: Playground component not rendering any content

@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/mdx@2.0.0-next.7.

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!

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/mdx@1.6.16 whereas npm installed @mdx-js/mdx2.0.0-next.7

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,
};