Attempting to use the Props builtin component. It simply just never works.

[robjac]

Bug Report

Describe the bug

Attempting to use the Props builtin component. It simple just never works.
There are no errors.

To Reproduce
import Props from docz ( import { Playground, Props } from "docz";

Expected behavior

Should render a <Props of={MyComponent}/> table.

Right now it just never renders; and there are no errors.

Environment

• OS: OSX 10.14.6 (18G87)
• Node: 12.4.0

[rakannimer]

Hello

Could you please provide :

1. The code for MyComponent
2. The docz version you're using

So we can try and reproduce your problem ?

[crusoexia]

+1

• docz version: ^2.0.0-rc.38
• mdx:

---
name: Button
---

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

## Props

<Props of={Button}></Props>

## Example

<Playground>
  <Button text="click me" />
</Playground>

• Button.tsx

import React from 'react';

interface Props {
  text: string;
}

export const Button: React.FC = ({ text }: Props) => {
  return (
    <button>{text}</button>
  )
}

results:

The project is just initailized by create-react-app with docz installed.

[rakannimer]

Could you please try :

- export const Button: React.FC = ({ text }: Props) => {
+ export const Button: React.FC<Props> = ({ text }) => {

Also, make sure you have typescript set to true in your doczrc.js file

[crusoexia]

@rakannimer same result.

• Button.tsx

import React from 'react';

interface Props {
  text: string;
}

export const Button: React.FC<Props> = ({ text }: Props) => {
  return (
    <button>{text}</button>
  )
}

• doczrc.js

export default {
  typescript: true
}

[rakannimer]

One last thing,

Can you try adding the extensions when importing Button in your mdx file ?

import { Button } from "./Button.tsx"

[crusoexia]

@rakannimer It works!

I think it's better to add a special section to describe how to integrate with typescript in the documentation.

[rakannimer]

I think it's better to add a special section to describe how to integrate with typescript in the documentation.

I agree with you, it should also not need the extension to be added to work.

Adding both to the project todos 👍

[Tesla0916]

i have the same problem，，and I tried the above solutions，but it sames didn't work

[rakannimer]

Hey @JadeDruid

Could you please provide :

• The code of the component you're testing
• The code of your mdx file that uses Props
• The docz version you're using

So we can try to help with your problem ?

[Tesla0916]

@rakannimer

• docz version: v1.3.2

the test code is the same as crusoexia‘s

[robjac]

import PropTypes from "prop-types";
import React from "react";

import "./styles.css";

const Button = ({ children, className, onClick }) => (
  <button className={className} onClick={onClick ? onClick : () => {}}>
    {children}
  </button>
);

Button.propTypes = {
  className: PropTypes.string,
  onClick: PropTypes.func.isRequired
};

Button.defaultProps = {
  className: null
};

export default Button;

---
name: Button
route: /button
menu: Components
---

import { Playground, Props } from "docz";

import Button from "./index.js";

# Button

## Examples

### Default Button

<Playground>
  <Button
    className="button"
    onClick={() => alert("You clicked the default button")}
  >
    Click Me
  </Button>
</Playground>

## Props

<Props of={Button} />

docz version : "docz": "^2.0.0-rc.10",

[robjac]

^ still not working for me ; however what is interesting is that it works for another one of my components that is set up the same way

[Tesla0916]

I ran into this problem again, oddly enough it only happens on Windows and it dosen't show up on macOS

[rakannimer]

@robjac I wasn't able to reproduce the problem with the code you provided.

Please try reproducing the problem in a repo and provide it here so we can help debug.

[ejuo]

@rakannimer
Props not showing in monorepo example.
Now v2 can auto get props from d.ts? Because import from package.

[geek-zwb]

Props not showing in my monorepo project. Playground is fine.

[robjac]

@robjac I wasn't able to reproduce the problem with the code you provided.

Please try reproducing the problem in a repo and provide it here so we can help debug.

I'll give it another shot when i have some time; Had to de-prioritize Design System + Component Library work as this is a problem.

Also having a hard time with encapsulating styles (not allowing Docz styles inside Playground.)

[danm]

@rakannimer may i piggy bag onto this issue with my own issue with rendering the props component.

Typescript: yes
docz: 2.0.0-rc.47

src/Test.tsx

import React, { SFC } from 'react';

export interface TestProps {
  does: boolean;
  thiswork: number;
}
export const Test: SFC<TestProps> = (props: TestProps) => (
    <div>
      Hello
      { props.thiswork }
      Wolrd
    </div>
);

Test.mdx

---
name: Test
route: /test
---

import { Props } from 'docz'
import { Test } from './Test.tsx'

<Test thiswork={10} />
<Props of={Test} />

Result

Component renders but just a line where the props should be
If this is a separate issue i can create a new ticket.
cheers

[jesperorb]

Made some changes to how this is handled. Could you try the new rc 2.0.0-rc.55 and see if the problem still persists?

[jackyFeng]

Hi, I'm facing an even wired scenario. I'm currently using "docz dev" and I used named export to export my component. When I import I added the filetype as well "*/index.jsx". The Props component rendered correctly. However, if I kill the dev environment and run the "docz dev" again, the Props component is not rendering, and I have to change the named export to default export of my component and it will render again after hot reloading. But I kill the dev env and start again, the Props component will not render again unless I change the export type.

I can provide more details if it is not clear, and will be appreciated if someone can help address this issue.

Thanks
Jacky

[robjac]

Made some changes to how this is handled. Could you try the new rc 2.0.0-rc.55 and see if the problem still persists?

I'll be trying this revision sometime this week. apologies for my lack of reply -- however, I am happy that others have found this issue thread helpful. :)

[robjac]

updgraded to 2.0.0-rc.55

and Props are still not showing for my Button component.

please let me know if you need another copy of my files. ( they are detailed above ).

Funny enough, Props is no longer working for any of my components anymore. (it used to work for one of my Components, built in the same way as my Button example above.)

[jesperorb]

updgraded to 2.0.0-rc.55

and Props are still not showing for my Button component.

please let me know if you need another copy of my files. ( they are detailed above ).

Funny enough, Props is no longer working for any of my components anymore. (it used to work for one of my Components, built in the same way as my Button example above.)

Have you tried:

import Button from "./index";

or exporting as named export without default and:

import { Button } from "./index";

[robjac]

updgraded to 2.0.0-rc.55
and Props are still not showing for my Button component.
please let me know if you need another copy of my files. ( they are detailed above ).
Funny enough, Props is no longer working for any of my components anymore. (it used to work for one of my Components, built in the same way as my Button example above.)

Have you tried:

import Button from "./index";

or exporting as named export without default and:

import { Button } from "./index";

This seemed to work,

although this doesn't seem like the best way to do this. I'd still like to be able to export defaults. Any way we could achieve this?

[robjac]

while "working" in docz dev mode,

it seems to spit out warnings for this pattern.

WARNING in ./src/components/index.js 2:0-29
"export 'default' (reexported as 'Button') was not found in './Button'
 @ ./src/index.js

[robjac]

while "working" in docz dev mode,

it seems to spit out warnings for this pattern.

WARNING in ./src/components/index.js 2:0-29
"export 'default' (reexported as 'Button') was not found in './Button'
 @ ./src/index.js

And. it just stopped working again...

May have to switch back to storybook as this is becoming far beyond scope of effort.

I appreciate the time and attention everyone has brought to this issue.

[robjac]

building multiple times for production fixed our production app ( no longer doubling the base url )

but now Props doesn't work anymore.

nothing in the repo has changed except for subsequent docz build runs.

[rakannimer]

Sorry you've had this frustrating experience ! We did more changes on the Props components that might solve your problem.

Coud you please provide a small repo with a repro of the problem so we can be more helpful in debugging this ?

[robjac]

Hey! i appreciate you're attention to this. I will try to get that to you as soon as I can ( possibly Sunday ). While some issues have been "ironed-out", it's the intermittency that makes using docz a bit unwieldy for us.

I will have to break a fragment of my project out as it's still WIP and not public as of yet.

I'll continue to keep you up to date here.

cheers! 🥂

[diondiondion]

@rakannimer Is there any documentation around which restrictions exist around the Props component? Like others here, I've never been able to make <Props of={...} /> work, but I'm wondering if it's related to the fact that the following component types are quite common in our component library:

• Components wrapped in React.forwardRef (Example source | Rendered Docz page)
• Basic styled-components without a wrapper (Example: Example source | Rendered Docz page)

Are those supposed to work with Props?

Curiously, I just noticed that I can make the Props table show up for the Button component by moving from this code structure to the one below:

Original (not working):

function ButtonWithRef(props, ref) {
    ...
}

const Button = forwardRef(ButtonWithRef);

Button.propTypes = {
   ...
};

export default Button;

Modified (working):

const Button = forwardRef(function ButtonWithRef(props, ref) {
    ...
});

Button.propTypes = {
   ...
};

export default Button;

Both are functionally equivalent, why is the second example working while the first one isn't?

We're on Docz rc.65 currently. I have locally checked out rc.67, but there was no improvement.

[rakannimer]

Hey @diondiondion

You're right, this should be better documented, a lot of people are running into these issues.

First, could you try to remove src from your docz config : https://github.com/5app/base5-ui/blob/master/doczrc.js#L4 ?

Components wrapped in React.forwardRef

docz relies on react-docgen to generate the documentation. Your forwardRef issue looks like it could be related to this react-docgen issue : reactjs/react-docgen#267 ?

Basic styled-components without a wrapper

I'm not sure that's a problem from styled-components, the docz styled-components example works as expected.

The issue in your box example seems to be from docz not recognizing that src/Box/index.js is a component. This was fixed in version 2.0.0.rc-67

[diondiondion]

Hi @rakannimer, thanks for the quick response.

First, could you try to remove src from your docz config : https://github.com/5app/base5-ui/blob/master/doczrc.js#L4 ?

The issue in your box example seems to be from docz not recognizing that src/Box/index.js is a component. This was fixed in version 2.0.0.rc-67

I've updated the repo to 2.0.0.rc-67 and removed the src prop from .doczrc, but unfortunately neither change had a positive effect.

docz relies on react-docgen to generate the documentation. Your forwardRef issue looks like it could be related to this react-docgen issue : reactjs/react-docgen#267 ?

Seems likely. What's interesting is that in the docgen ticket, the working and broken notations are switched around when compared with my examples. Their workaround (creating an intermediate variable) is what I'm doing which is not working, while if I remove the intermediate variable, it fixes it for me. It's a bit weird that their ticket has been closed without a clear resolution... maybe a new ticket is in order. 🤔

I'm not sure that's a problem from styled-components, the docz styled-components example works as expected.

In the example you're linking to, styled-components are not exported directly, but wrapped with an intermediate JSX component that I'd definitely like to avoid as it doesn't add any value and adds an extra component call.

To be more specific, your example is doing this:

const ButtonStyled = styled('button')`
    ...
`

export const Button = ({ children, ...props }) => (
  <ButtonStyled {...props}>{children}</ButtonStyled>
)

Button.propTypes = {
    ...
}

While I want to be able to do this:

export const Button = styled('button')`
    ...
`

Button.propTypes = {
    ...
}

In the forwardRef case, I'm willing to change my notation to the working one as it doesn't affect the component's compiled output, but in the styled-components example I don't want to add the extra component.

[rakannimer]

In the example you're linking to, styled-components are not exported directly, but wrapped with an intermediate JSX component that I'd definitely like to avoid as it doesn't add any value and adds an extra component call.

Oh my bad, I missed that.

It looks like this is also a known limitation of the react-docgen default resolver :

reactjs/react-docgen#187
reactjs/react-docgen#256
reactjs/react-docgen#375

styled-components/styled-components#1197

There was a PR in react-docgen to fix this but it was dropped :

reactjs/react-docgen#195

Maybe someone can open a new updated one ?

I don't want to add the extra component.

Yeah I understand.

You can pass a custom react-docgen resolver (https://github.com/reactjs/react-docgen#resolver) to docz by using docgenConfig.resolver in doczrc.js but I'm not sure how this resolver should look like.

EDIT: Starting from 2.2.1 you can use styled-components without a wrapper.

[diondiondion]

You can pass a custom react-docgen resolver (https://github.com/reactjs/react-docgen#resolver) to docz by using docgenConfig.resolver in doczrc.js but I'm not sure how this resolver should look like.

Thanks for the tip – that's the ticket!
Instead of trying all kind of tricks to make docgen's default component detection work, I now make use of a custom resolver that works by annotating a component's default export with a comment like so:

// @component
export default Component;

It's a tiny bit of extra manual work, but IMO much preferable to the alternatives because it doesn't change the component's internals. Only downside is that the resolver can't be used on top of the default detection, so I had to add the comment even to components that were previously detected automatically by docgen. Then again, this way it's consistent across the component library.

For anyone interested in going this route too, these are the steps required to do so:

1. Install the annotation resolver to your dev dependencies:

   npm install --save-dev react-docgen-annotation-resolver
   

2. Add it to your doczrc.js file:

   import AnnotationResolver from 'react-docgen-annotation-resolver';
   
   export default {
   	/* ...regular docz options... */
   	docgenConfig: {
   		resolver: AnnotationResolver,
   	},
   };

3. Start annotating your component's default exports with a @component comment as shown above

[tylerthehaas]

I am also having this issue in a monorepo setup. I tried what @diondiondion suggested but it didn't work for some reason. See my repo here

[rakannimer]

Starting from 2.2.1 styled components are parsed automatically by docz without any need for configuration or wrapper component.

While waiting for the release you can try out 2.2.1-alpha.1 using yarn add docz@next.

I updated the styled-components example to showcase this https://github.com/doczjs/docz/tree/master/examples/styled-components

This issue has grown too much with a lot of people chiming in with different problems, has a broad unhelpful title and the Props component has evolved a lot since it was opened.

I'm going to close it and encourage you to open a new issue with a specific problem so we can give every issue the attention it deserves 👍

[robjac]

The original title explained what the issue was opened for. the following comment detailed exactly what I was experiencing.

The title is broad because the Props component never rendered for me (and still doesn't) -- and I've tried multiple rc versions ( had to keep bumping to fix things ).

I will open a new issue when I return to the project ( we've had to shelf it as it's currently too much effort to maintain the intermittency of Docz at the moment ( for us ).

One good thing is that you can use the same files in a Storybook project and they port over just fine ( including Props ).

[rakannimer]

the following comment detailed exactly what I was experiencing.

Do you mean this ? Using this code alone works as expected as you can see in the basic example here

Also, e2e tests are run on every commit to make sure the Props do work for this example and many others.

I appreciate that you've tried detailing the issue, but try to see it from a maintainer's point of view, your comments are not very helpful and don't offer any insight into the problem.

I will open a new issue when I return to the project

Cool 👍 And as I've said on multiple occasions in this issue, please try to include a repro with the problem so we can help you debug or at least provide a thorough description of your setup.

[tylerthehaas]

Idk if this helps. But I was experiencing this problem when using it with typescript. Turned out the issue was that I didn't have a tsconfig file. Once I added that it solved the issue. Is it possible that might work for you as well @robjac? If so then maybe adding that to the documentation would eliminate some of these pain points for others. If not @rakannimer is right. The docz community can provide much more help if you share the smallest reproducible example possible.

[robjac]

@tylerthehaas hey!

We aren’t using Typescript in our project.

I simply have not been able to reproduce it as it is intermittent. I apologize for being unhelpful, but it seems like A LOT of people used this issue was a place to discuss common problems. I see that as helpful! :) (But I get it)

The provided code was the only thing running in the docz project at the time. It should’ve sufficed. If it’s working for you then perhaps it’ll work for me now — but like I said, the intermittency of failing features/build hangs over the last 2 months pushed my team to prototype a Storybook app alongside it. I’m still a fan of docz, but we’ve had to bump to bleeding rc versions and had to pop file extensions on and off import paths to get Props to work and in some cases it didn’t. Same pattern for two different buttons.

I completely understand the need for repro for help but there was nothing else to provide.

I’ll circle back to this when I can. And open a new issue with whatever I can provide to reproduce* future issues. I have other team members that have opened issues with hanging builds too so we are watching Docz’s development closely 👍🏽

Thanks for the hard work.

[tylerthehaas]

totally good. Just wanted to be helpful if I could since I was having this problem and found a way to resolve it. Good luck!

[treeindev]

Idk if this helps. But I was experiencing this problem when using it with typescript. Turned out the issue was that I didn't have a tsconfig file. Once I added that it solved the issue. Is it possible that might work for you as well @robjac? If so then maybe adding that to the documentation would eliminate some of these pain points for others. If not @rakannimer is right. The docz community can provide much more help if you share the smallest reproducible example possible.

I am using a monorepo. Each individual packages and app have their own tsconfig.json but because I am using Docz at the top level (root folder) it was missing its tsconfig.json. Adding it with default configurations has solved the issue. Thanks!

[Stevemoretz]

Idk if this helps. But I was experiencing this problem when using it with typescript. Turned out the issue was that I didn't have a tsconfig file. Once I added that it solved the issue. Is it possible that might work for you as well @robjac? If so then maybe adding that to the documentation would eliminate some of these pain points for others. If not @rakannimer is right. The docz community can provide much more help if you share the smallest reproducible example possible.

1. For typescript It did help just ran tsc --init, thanks!
2. You also need to use non default exports for it to work.
3. upon import make sure to include .tsx at the end. eg :

import {DummyFormRef} from "./DummyForm.tsx";