docz: Props components not working since 1.0.0-rc.8

@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))

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'

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

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

using 1.2.0

add a prop to doczrc.js

// modify the regex to your needs
filterComponents: files => files.filter(filepath => /src\/components\/.*\/*\.(js|jsx|ts|tsx)$/.test(filepath)),

write the regex you want to include your target component

is is confirmed that adding:

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

to the docz config allows props to be generated for ts projects? it’s not working for me.

code here: https://github.com/madou/yubaba/pull/110

edit: clearing .docz folder and then re-running produces the error:

● Docz █████████████████████████ building (11%) 16/18 modules 2 active
 node_modules/node-libs-browser/node_modules/events/events.js

⚠  warning   Any cache was found with your props definitions
⚠  warning   We'll parse your components to get props from them
⚠  warning   Depending on your components, this could take while...
✖  fatal     Failed to process data server
✖  error     TypeError: Cannot read property 'properties' of undefined
    at Parser.extractDefaultPropsFromComponent (/Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:606:68)
    at Parser.getComponentInfo (/Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:255:33)
    at /Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:959:20
    at Array.map (<anonymous>)
    at /Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:958:12
    at Array.reduce (<anonymous>)
    at parseWithProgramProvider (/Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:947:6)
    at Object.parseWithProgramProvider (/Users/madou/projects/yubaba/node_modules/react-docgen-typescript/src/parser.ts:171:14)
    at files.map.filepath (/Users/madou/projects/yubaba/node_modules/docz-core/dist/index.js:1816:19)
    at Array.map (<anonymous>)
    at parseFiles (/Users/madou/projects/yubaba/node_modules/docz-core/dist/index.js:1814:16)
    at tsParser (/Users/madou/projects/yubaba/node_modules/docz-core/dist/index.js:1825:16)
    at docgen (/Users/madou/projects/yubaba/node_modules/docz-core/dist/index.js:1834:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  yubaba git:(docz-1)

will dig into it.

anyone know why defaultProps.initializer might be undefined? if i guard against it in parser.js in react-docgen-typescript i can get props being generated.

edit again:

it was picking up my built type defs! ignoring them fixes the problem. ended up using the regex /([^d]\.tsx?)$/

@JackCuthbert Your problem is similar.

1. 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))

1. And for typescript project tsconfig.json required.

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

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

From what I understand, the regex can be simplified to:

/\w*.(?:j|tsx?)$/.test(filepath)

I’ve been 👀 -ing this issue as well. I had hoped #836 and the v1.1.0 release would fix this issue, but it did not for me. I have a branch w/ Netlify preview that’s upgraded to the latest packages where you can see the issue persists:

https://github.com/OHIF/react-viewerbase/pull/68

Thanks for your PR’s on this @ejuo. Hoping #849 does the trick ^_^

Just updated to 1.1.0, looks like this includes a PR that attempted to resolve this issue. I’m still not getting any props to render 😦 TS enabled, direct imports, no HOC, the works.

😞

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?

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

@mlshv I think your problem is related to https://github.com/pedronauck/docz/pull/779 . Try to change filterComponents. Does it help?

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.

@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?

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)

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

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

Any news on a bugfix?

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)

Has anyone tested in the linux environment? I have the same problem. Version 1.2.0.

Edit: worked with madou solution

/([^d]\.tsx?)$/

Why not accept both (first letter lower and first letter upper case)? Why it’s filtered by default?

Not fixed in 1.1.0. In dev mode, most of can fix with edit the component file(such as add React.memo, save then props appears, after that even go back the file, the props still exist), but in build mode it doesn’t work.

Not fixed in 1.1.0 for me. Just touching the file on dev build the props appears, but when building again for production, it doesn’t.

@dannyrb, I checked your library with the fix (#849) notUseSpecifiers: true. It’s working. I also noticed that not all components are named for the pattern /\/[A-Z]\w*\.(js|jsx|ts|tsx) (#779), you will need to define filterComponents in your doczrc.js.

@Hilaker your solution didn’t work for me.

Had a similar issue, what worked for me was adding react-docgen version 4.1.0 to my project.

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

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?

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: https://github.com/OHIF/react-viewerbase/pull/66/commits/c0b0ed230639ce13c69e1003b74a9cb76529a948

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.

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

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

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

@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