Props components not working since 1.0.0-rc.8

[ivan-dalmet]

Bug Report

The Props components don't render props since rc8 (working in rc7).

There is our folders structure:

📂 src
↳ 📂 docs (our documentation with MDX files)
↳ 📂 saagie-ui (our React components)
📄 doczrc.js

// doczrc.js
export default {
  title: 'Saagie Design System',
  description: 'Documentation from the Saagie Design Team',

  src: './src',
  public: './src/docs/public',
  files: '**/*.mdx',
  ignore: ['docs-versions'],
  wrapper: 'src/docs/Wrapper',
  codeSandbox: false,
}

No idea why, we investigate on it. Any idea?

[ivan-dalmet]

#776 (comment)

@ivan-dalmet are you importing your props for your components? Maybe it's related to this.

[ivan-dalmet]

@rfoel I just reproduced the bug (this time I hope without typo ^^)

The <Props of={Component} /> is not working if we import the React component through another file.
Example
https://github.com/ivan-dalmet/docz-issue-sandbox/tree/master/issue-777

[ronghang]

Props components also not working when I set typescript as true in doczrc.js config file.

[lesha1201]

@ivan-dalmet I think this is issue with react-docgen-typescript that related to styleguidist/react-docgen-typescript#176 . Try to export { ButtonKO } from './ButtonKO'; in your index file. Does it help?

[panjiesw]

Is 1.0.0-rc even use react-docgen-typescript? In docz-core v0.13.x I could see the use of react-docgen-typescript-loader, but in v1.0.0-rc.8 source there is no react-docgen-typescript-loader added in the config chain.

v0.13.7 loader.ts
v1.0.0-rc.8 loader.ts

EDIT: NVM, found the ts props loading logic in docz-core/src/utils/docgen/typescript.ts

[ivan-dalmet]

@lesha1201 yeah that's a working workaround!
Thanks!

[pollys2217]

Hello!
I have the same problem. The Props components don't render (

// package.json:

"devDependencies": {
  ...
  "docz": "1.0.0-rc.7",
  "docz-core": "1.0.0-rc.7",
}

// doczrc.js

import { css } from 'docz-plugin-css';
const path = require('path');
const poststylus = require('poststylus');

export default {
  title: '80lv',
  port: 8080,
  codeSandbox: false,
  hashRouter: true,
  dest: 'docs',
  // base: './',
  // src: './',
  plugins: [
    css({
      preprocessor: 'stylus',
      cssmodules: true,
      loaderOpts: {
        import: [path.resolve('styles/common.styl'), path.resolve('styles/document.styl')],
        use: [poststylus([require('autoprefixer')()])],
      },
    }),
  ],
};

// index.js

import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import styles from './styles.styl';

const Heading = ({ className, children, level, tagName, ...otherProps }) => {
  const TagName = tagName ? tagName : `h${level}`;

  return (
    <TagName
      {...otherProps}
      className={cn(styles.Heading, className, {
        [styles[`Heading_level_${level}`]]: level,
      })}>
      {children}
    </TagName>
  );
};

Heading.defaultProps = {
  className: '',
  level: 2,
  tagName: '',
};

Heading.propTypes = {
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
  level: PropTypes.number,
  tagName: PropTypes.any,
};

export default Heading;

// Heading.mdx

---
name: Heading
menu: Components
route: /components/heading
---

import { Playground, Props } from "docz";

import Heading from '.';

# Heading

<Playground>
  <Heading>
    Heading h2
  </Heading>
</Playground>

## Properties

<Props of={Heading} />

[klappy]

I'm having the same issue and have tried every work around suggested above and others I could think of. I've even directly imported from the component file and not the index and Props do not render.

I've tried many combinations of the following:

• npm vs yarn
• rc.8, rc.7, rc.6
• removing react/react-dom from dependencies in case it clashed (based on other docz issues)
• multiple components exporting styles, defaults vs {Component}.
• Directly importing Component.js vs index.js.
• In Component.js export const Component = () => {} vs export default Component at the bottom.

I have multiple component folders self contained using combinations of the above so that I can test them while changing releases and npm/yarn.

[klappy]

Finally figured it out! It was an odd combination of removing the peer dependencies that I thought I had to add to make docz/yarn happy, including react, react-dom. I tried to get my package.json to look as close to this file here: https://github.com/ivan-dalmet/docz-issue-sandbox/tree/master/issue-777

[pollys2217]

The problem is that when using export default object don't contain __filemeta

https://github.com/pedronauck/docz/blob/master/core/docz/src/components/Props.tsx

export const Props: SFC<PropsProps> = ({ of: component }) => {
  const components = useComponents()
  const { props: stateProps } = React.useContext(doczState.context)
  const filename = get('__filemeta.filename', component)
  const componentName = component.displayName || component.name
  const found =
    stateProps &&
    stateProps.length > 0 &&
    stateProps.find(item => item.key === filename)

  const definition =
    found && found.value.find((item: any) => item.displayName === componentName)
  const props = get('props', definition) || []

  if (!props) return null
  if (!components.props) return null
  return <components.props props={props} getPropType={getPropType} />
}

@pedronauck

[mlshv]

I have my components:

components
|- Button
|-- Button.jsx
|-- index.js
docs
|- button.mdx

exported like this:

// Button.jsx
// ...
export default Button

// index.js
export Button from './Button'

And when I import Button in .mdx, <Props /> doesn't render:

import { Button } from 'components/Button'
...
<Props of={Button} /> // doesn't render

However, if I import Button directly from the Button.js file, it works:

import Button from 'components/Button/Button'
...
<Props of={Button} /> // renders

Though it seems like a workaround for this particular case, I still have the same error for some (more complex) components. I haven't found the reason yet, but these components worked great with good old PropsTable (I really miss it btw)

[panjiesw]

@mlshv +1 for the table. Might be a good idea for docz-theme-default to present Props component as table, like the one in v0.x. But maybe that's how it'll be in the final v1 release?

[klappy]

Now that I have PropTypes rendering using the happy path, I'm still finding one use case that I can not get to render.

When leveraging import { withStyles } from '@material-ui/core/styles';, it exports this way: export default withStyles(styles)(Component);.
https://material-ui.com/customization/css-in-js/#withstyles-styles-options-higher-order-component

Is there a way to use my index.js file in the folder to export it in a way that Props will render? My attempts haven't been fruitful just yet.

Workaround:

It's not elegant, but this appears to work:

export const WrappedComponent = withStyles(styles)(Component);

Update for v1.0.0:

This workaround no longer functions and have to maintain using rc.8 for now.

Update for v1.0.4:

The workaround appears to function again and does not appear to function with basic default exports.

[cupofjoakim]

Currently at v1.0.0, Props works perfectly for us in dev, but when we build production Props deosn't render anything From what I can tell in this thread most of you have this issue in dev as well, so maybe it's a separate issue

[mlshv]

I think I found the source of the problem (at least in my case).

TLDR;
Always use direct import for all documented components.

Theory

The Props component uses __filemeta.filename property of a passed component (source) to get component's prop types.

The list of all components' info (I guess that it gets resolved by findAllExportedComponentDefinitions from react-docgen) is in stateProps variable (source). Every item has a path to the component file, e.g.:

And everything goes normal when we import a component directly:

import Button from 'components/Button/Button'

And crashes when we do it through an index.js file:

import { Button } from 'components/Button'

That's because in the second case we have __filemeta.filename equal to components/Button/index.js. The stateProps doesn't have an item with the corresponding key, so component's info is never found.

Why it doesn't work as expected even when I import component directly in my .mdx

Even when I import ComponentA in my .mdx like this:

// in .mdx
import Button from 'components/Button/Button'

it may not work because it has already been imported in another component through index.js:

// some component that uses Button
import { Button } from 'components/Button'

So the workaround I found is to always use direct import for all my documented components. It doesn't look pretty, but at least it works.

I think that this issue is related to the way react-docgen resolves components. @pedronauck can you provide an idea how it may be possible to import components through index.js files? It was possible in 0.13.7, so maybe it has something to do with react-docgen config.

UPD: @cupofjoakim I have the same problem. Props doesn't display in production build, even if I apply the mentioned workaround. For me, docz became so unstable after migration from 0.13.7. Thinking about migration to styleguidist

[lesha1201]

@mlshv I think your problem is related to #779 . Try to change filterComponents. Does it help?

[dannyrb]

1.0.0-rc.8

• Docs for props don't show in dev
• If I add or change a comment on a component's props, the hot-reload causes props to render

v1.0.x

• Docs do not show for any components in dev or prod builds

It may be worth nothing that each .mdx imports the component it describes from an index.js file in the components folder: import { Button } from './../index.js'. Switching a few files to import { Button } from './../Button.js' does not produce different results.

UPDATE:

Well. This is interesting. I applied some pretty mundane prettier autoformatting, and all of my props are showing again. I'm not 100% sure I know what resolved the issue, but going file by file and applying caused my props to start showing again.

This is the commit, for the curious: OHIF/react-viewerbase@c0b0ed2

It could be a change from CRLF line endings to LF line endings

UPDATE 2:

While the above commit allowed docs to render while I was developing locally, the production build did not render docs. Stopping and restarting the dev build locally removes docs until I modify and save a file. Prop docs are then shown again.

[madsgodvinjensen]

UPDATE 2:

While the above commit allowed docs to render while I was developing locally, the production build did not render docs. Stopping and restarting the dev build locally removes docs until I modify and save a file. Prop docs are then shown again.

I'm seeing this same behaviour. Starting without a .docz cache the props are not showing. After formatting the file in VS Code (which doesn't register any changes in git...) the module reloads with props in place.

Is there maybe a difference in how the docs are built when starting the dev-server and when rebuilding a single module?

[madsgodvinjensen]

I tried commiting the .docz folder to git to be able to diff the changes that happen when saving a file (as per my comment above). It seems that, when running with docz dev and saving a source (.js) file, that particular file is added to the .docz/app/db.json file. Before saving the file, the contents of the json file is only README.mdx files.

This is in version 1.0.1 of docz

Diff screenshot:

[evosch]

I've found a cause of the Props not working on Windows in version 1.0.3. The __filemeta.filename uses backward slashes (windows style) and the stateProps contain forward slashes, making the find-method not find anything.

[dannyrb]

@evosch, for what it's worth, my dev machine is Windows, and the CI that deploys our production docs is Linux. Both output a docz site that does not render props.

[drewlustro]

😞

I've experienced some version of this problem throughout all the beta releases of Docz w/ Typescript; sad that it continues to be problematic in v1.0.x.

Environment:

• Docz v1.0.2
• TypeScript
• Named exports

docz.js

import { css } from 'docz-plugin-css';

export default {
  title: 'My project',
  typescript: true,
  onCreateWebpackChain: (config) => {
    if (config.resolve.alias.set) {
      config.resolve.alias.set('~/components', path.join(__dirname, 'src', 'components'));
    }
  },
  plugins: [
    css({
      preprocessor: 'sass',
      cssmodules: true,
      loaderOpts: {
        includePaths: [
          path.resolve(__dirname, 'src', 'scss')
        ]
      },
    }),
  ],
}

Button/index.mdx

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

# Button

## Props

<Props of={Button} />

## Sizes

Button/index.tsx

export interface ButtonProps {
  size?: 'regular' | 'small' | 'inline';
  children?: React.ReactNode;
  className?: string;
}

class Button extends React.PureComponent<ButtonProps> {
  render() { 
    // ...
  }
}

export { Button };

⚠️ Props fail to render

---

🙏 Prayers out to @pedronauck. Perhaps the typescript example needs to be more robust? Solutions suggested by the community seem to always check:

• Typescript?
• Are you using named exports?
• Has the exported component been exported by index.tsx or ComponentName.tsx ?
• Is the exported component enhanced by a higher-order component?

[dusty]

I'm having the same issue with props not displaying. I'm running on docz 1.0.4.

The interesting thing is if I touch the file that mdx file is importing, then it rebuilds and the props show up. They are never there on the initial load.

At first I thought I'd just write a script that touches all my js files, but that doesn't seem work. It seems I need to do that one at a time.

PS.

• not using typescript
• I am currently using named imports directly from the file that I am importing
• The component is exported by an index.js file, but I am importing it directly
• The component is not enhanced by an HOC

eg

export const UiDataTable = () => {}

import { UiDataTable } from './ui-data-table'

[yyynnn]

None of the above config combinations help to render Props component at 1.0.4. Not windows nor macos

[crazyxhz]

I'm using 1.04 (latest version) of docz with typescript and I found a workaround for this,

edit .docz/cache/propsParser.json and paste you components's corresponding json as this:

{
    ...
    "src/components/button/index.tsx": {
        "props": []
    }
    ...
}

the key of the json object is the path to your components, then edit your components props: e.g: add/edit a comment of your component's props. and The props table will show

[yyynnn]

@ejuo, here you go https://github.com/yyynnn/mtsbankui/blob/master/doczrc.js

gh-pages branch, those Props that show up are wrong
https://yyynnn.github.io/mtsbankui

[ejuo]

@yyynnn, my assumption was confirmed. With modifyBabelRc you rewrite original docz config, that disabled babel-plugin-export-metadata plugin.
There is several ways:

1. Not use babel-plugin-export-metadata plugin. Then for each documented component you need to set displayName prop, that must equal component name.
2. Use concat/spread for your plugins, eg, plugins: [...babelrc.plugins, '@babel/plugin-syntax-dynamic-import'].
3. And most simple way for your case, not use modifyBabelRc in doczrc.js. I see babel.config.js, will be added to the docz config.

[yyynnn]

@ejuo wow, thanks for such a thorough answer!

It was crucial line in the config to work with older versions, now it works fine without it.

[turkyden]

@dusty
Your components not named for the default pattern /\/[A-Z]\w*\.(js|jsx|ts|tsx) (#779), you will need to define filterComponents in your doczrc.js, eg:

...
  filterComponents: (files) =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath))

It works, thank you very much! The props components has displayed in my site now.

[felixakiragreen]

Also encountering the same issue with typescript. Logging everything inside the src Props component:

I see that the filename is not matching up, but I'm not sure how to set up the doczrc.js for it to work. Currently using:

//...
  typescript: true,
  notUseSpecifiers: true,
  filterComponents: files =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath)),
//...

(I should note I'm using v1.2.0)

[therebelrobot]

After adding the options listed in #777 (comment) as well as blowing away the .docz folder and rebuilding, the issue was fixed for me. Typescript v3.3.3, Docz v1.2.0

[baoduy]

I have similar issue with TypeScript interface when the definition and component are in difference files.

[LucidityDesign]

Any news on a bugfix?

[kikorb]

@dusty
Your components not named for the default pattern /\/[A-Z]\w*\.(js|jsx|ts|tsx) (#779), you will need to define filterComponents in your doczrc.js, eg:

...
  filterComponents: (files) =>
    files.filter(filepath => /[w-]*.(js|jsx|ts|tsx)$/.test(filepath))

You are my hero. dev and build both working after I added jsx to the filterComponents

[zicodeng]

TypeScript solution:

1. You must have tsconfig.json configured properly
2. Add the following to your doczrc.js

export {
  ...
  notUseSpecifiers: true,
  filterComponents: files => files.filter(file => /([^d]\.tsx?)$/.test(file)),
  ...
}

Remove your .docz before testing it

[YYJay]

I'm using 1.04 (latest version) of docz with typescript and I found a workaround for this,

edit .docz/cache/propsParser.json and paste you components's corresponding json as this:

{
    ...
    "src/components/button/index.tsx": {
        "props": []
    }
    ...
}

the key of the json object is the path to your components, then edit your components props: e.g: add/edit a comment of your component's props. and The props table will show

I remove .docz file and restart server, just fix it out.don't know why

[LucidityDesign]

I had to find another solution:

Working solution

index.mdx

import { ButtonPlain } from './'

index.js

export { default as ButtonPlain } from './ButtonPlain'

ButtonPlain.js

export default class ButtonPlain extends React.Component {
[...]
}

Props not showing

index.mdx

import ButtonPlain from './'
- OR -
import ButtonPlain from './ButtonPlain'

index.js

import ButtonPlain from './ButtonPlain'
export default ButtonPlain

ButtonPlain.js

export default class ButtonPlain extends React.Component {
[...]
}

[LavaToaster]

I've taken a look into this and I believe this issue solely lies within the babel-plugin-export-metadata plugin.

None of my components have the __filemeta that it is supposed to have, So when it tried to get the filename, it can't. Additionally as I don't follow the {componentName}.(jsx|tsx) structure. (My components are structures like <name>/index.tsx)

[shermanhui]

@Lavoaster could you elaborate on the issue on the babel-plugin-export-metadata plugin? I'm having a similar issue where props are being rendered in development but not for production

[Binomi0]

I had this issue and after read and try most of the comments here, finally could get it work.

Seems like to see in your docz file (mdx). You have to had in your exported component declared propTypes.

<Props of={DataContent} />

In your awesome component declare proptypes;

DataContent.propTypes = {
  title: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  style: PropTypes.object,
};

NOTE: If you declared your propTypes inside your Class as static it will not work...

[nathsimpson]

@Binomi0

NOTE: If you declared your propTypes inside your Class as static it will not work...

Damn. I'm trying to document some React Native components. The default RN components use 'static' PropTypes. Is there a work around for this?

[reneolivo]

Hello!

I hope this issue is fixed soon, but in the mean time I have a fix for those of us that are using Typescript.

For some reason the Props component looks for the DocGen data in some global state. Not sure what are the rules for populating the data into that state object, but only 1 of my components has the right data there. All others are ignored. Even after using filterComponents.

I noticed that my components have the right data like this: MyComponent.__docgenInfo so I'm not sure why the Props component needs to look for this info on the global state 🤷‍♂ .

So I created my own component that replaces Props. If you look into the source you'll notice that the only thing that Props do is get the props from this global state, get a Props Table component from the theme, and then pass on the data. We can do the same with the right data:

import { useComponents } from 'docz';

export default function PropsTable(props) {
  const { of: Component } = props;
  const { props: DoczThemePropsTable } = useComponents();
  const componentProps = Component.__docgenInfo.props;

  return <DoczThemePropsTable
    props={componentProps}
    getPropType={getPropType}
  />;
}

// This `getPropType` is more complex on `Docz`, but we can simplify it:
function getPropType(prop) {
  const { flowType } = prop;

  return flowType.raw || flowType.name;
}

Your component should also follow this structure:

export default function MyComponent(props: MyProps) {
  const { name } = props;

  return (
    <h1 className={className}>
      {name}
    </h1>
  );
}

type MyProps = {
  className?: String, // optional prop
  name: String,
};

MyComponent.defaultProps = {
  className: 'my-component',
};

Tried to use interface instead of type, but Docgen does not seem to recognise it.

On your .mdx file just include this component and use it as follows:

import MyComponent from './MyComponent';
import PropsTable from './PropsTable';

<PropsTable of={MyComponent} />

[robjac]

👍 Props of component never renders for me; PropsTable isn't in docz either..

[dyanezr92]

👍 Props of component never renders for me; PropsTable isn't in docz either..

+1

[robjac]

I really wish we'd get at least some update or even a message like "hey i'm swamped right now, i'll have to get to it later"

docz is quickly becoming more of a hassle than the helpful tool it's marketed as.

also having issues with encapsulating styles. ( how can you have a style/design/component library if all our components are informed by Docz's styles... will dig into resetting the Theme entirely )

[rakannimer]

Hey,

Please note that this issue is for docz v1.

If you're on docz v2 and this is happening to you than I suggest opening a new issue with your problem and we can help debug it, or check out the examples in the repo.

If you want your issue to be fixed faster make sure to provide a repo with a reproduction of the issue.

If you're on v1, unfortunately, I can't help you as I don't know enough about it and am swamped right now with v2 development !

EDIT: I see @robjac that you also opened an issue #1091

Moving the discussion for v2 there

[Tesla0916]

hi，i check my code lastnight.And find something here.I'm wishing to be helpful.
There is my folders structure:
📂 src
↳ 📂 components (documentation with MDX files)
↳ 📂 button

``````````` 📄 index.mdx
``````````` 📄 index.less
``````````` 📄 index.less.d.ts
📄 doczrc.js
but the components' props do not render
-------
when i change the folders structure like this:
📂 src
↳ 📂 components (documentation with MDX files)
    ↳ 📂 button
``````````` 📄 button.tsx
``````````` 📄 button.mdx
``````````` 📄 button.less
``````````` 📄 button.less.d.ts
📄 doczrc.js
,,
and my components render properly right

[stale]

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.

[josedvq]

TypeScript solution:

1. You must have tsconfig.json configured properly
2. Add the following to your doczrc.js

export {
  ...
  notUseSpecifiers: true,
  filterComponents: files => files.filter(file => /([^d]\.tsx?)$/.test(file)),
  ...
}

Remove your .docz before testing it

Just spent hours battling this to find out that a tsconfig.json is necessary. Thanks a lot!