ArgsTable of={Component} cannot find propTypes

[jasongaare]

Describe the bug

I've followed directions outlined here #12576 to export my wrapped components directly, however my <ArgsTable of={Component/}> component still renders that "No inputs found for this component"

However, when I console.log the component itself, the propTypes + defaultProps seem to be plainly available.

The way I read this, it should "just work"?

If you need, you can customize what is displayed in the ArgsTable by extending the ArgTypes data, unless you're using the ArgsTable of={component} />. In this case, Storybook will infer the data automatically from the component.

Screenshot

I've scoured the issues here, tried various webpack configs, babel configs but nothing seems to clear my issue. I'm working in a monorepo with Expo + React Native + React + storybook, so there's likely some wires crossed somewhere.

System
Please paste the results of npx sb@next info here.

Click for System Info

Environment Info:

System:
OS: macOS 12.3.1
CPU: (10) x64 Apple M1 Pro
Binaries:
Node: 12.22.0 - ~/.nvm/versions/node/v12.22.0/bin/node
Yarn: 1.22.18 - /opt/homebrew/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v12.22.0/bin/npm
Browsers:
Chrome: 100.0.4896.127
Firefox: 100.0
Safari: 15.4

[dmackerman]

Yeah, I can't get this to work either. Not doing anything fancy. :\

[shenyi-dra]

+1

[samuelhorn]

Same thing here!

[RwwL]

We've got a scenario right now where this is happening for a single new component in a storybook with dozens of other components that we've been building for years, and it's only happening for about half of the people who've checked out the repo and tried it locally. Lots of eyes have been over it so far and there really don't appear to be any errors in the files. The component whose props we're trying to show in the ArgsTable works just fine in the Canvases just above, with all the props doing what they should.

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[sag1v]

Having the same issue during a migration to v7 from v6.
Can't share the repo unfortunately as it is private.

BTW, i've seen the deprecation warning:

The ArgsTable doc block is deprecated. Instead use the ArgTypes doc block for static tables or the Controls doc block for tables with controls.
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block

So i tried the ArgsType component. Same issue.

[RwwL]

@sag1v In the component whose ArgsTable doesn't work in a story, are you exporting anything else at all? That wound up being the solution for us: as soon as we moved that utility into its own file and imported it into the component instead, the ArgsTable started working on the story page for everyone on the team.

Truly bizarre one that we solved out of pure luck/trial and error.

[sag1v]

@sag1v In the component whose ArgsTable doesn't work in a story, are you exporting anything else at all? That wound up being the solution for us: as soon as we moved that utility into its own file and imported it into the component instead, the ArgsTable started working on the story page for everyone on the team.

Truly bizarre one that we solved out of pure luck/trial and error.

Thanks for letting me know.

Unfortunately this is not the case for us.
I created a new component for testing this, just a simple button with 1 export.
I tried using this component in a sendbox but i can't reproduce this issue.
Really hard to debug as well because there are no source maps for the ArgTypes component. 😒

[sag1v]

@jasongaare Did you ever solve this issue? i'm still struggling to find a solution (or to reproduce with a clean sandbox).

@shilman Its really hard to debug this as we don't have source-maps. Is it possible to publish the latest version as an "alpha" or something but include source-maps?

[jasongaare]

We never did find a solution. We currently manually define all our prop types and feed them to an ArgsTable that way

[sag1v]

We never did find a solution. We currently manually define all our prop types and feed them to an ArgsTable that way

@jasongaare What version of react do you have?

[sag1v]

I think I've managed to reproduce this issue (finally!!!).

It turns out, that whenever there is a babel config e.g: .babelrc.json with the '@babel/preset-env' preset set, it breaks the ArgTypes/argTable component.

See this sandbox.

When removing the preset it works fine.

CC @shilman

[sag1v]

I think I've managed to reproduce this issue (finally!!!).

It turns out, that whenever there is a babel config e.g: .babelrc.json with the '@babel/preset-env' preset set, it breaks the ArgTypes/argTable component.

See this sandbox.

When removing the preset it works fine.

CC @shilman

UPDATE
It seems that the issue is related to the targets property and also specifically to the chrome: 100 settings 🤔
Any other settings seems to work.
See this video:

Screen.Recording.2023-05-23.at.14.07.04.mov

Not sure what is this black voodoo all about 🤷