docgen not working with preset-typescript about presets

[shilman]

Congrats on finding a juicy bug, and bigger congrats on figuring out the "right" solution! 🎉

I debugged the problem using Storybook's --debug-webpack-config option, and it's kind of subtle. Here's what's happening:

1. preset-typescript is doing what it's supposed to
2. @storybook/react's cra-config is executing (automatically) downstream and removing the .tsx rule added by preset-typescript

The reason your manual config works is because it is executed downstream from that.

Here's what I think needs to happen:

1. preset-typescript docs need to instruct you to use a custom config in the case of CRA (use a custom config)
2. cra-config needs to be moved out into its own preset so that it's easier to reason about, rather than being black magic storybookjs/storybook#7221
3. The preset loading infrastructure needs a way of logging when there are conflicting rules storybookjs/storybook#7220
4. preset-cra probably needs to use the same logging method to let users know when it's removing conflicting rules.

In the meantime, what you did (custom config) is actually the right thing to do IMHO.

What do you think?

[city41]

Interesting. CRA is pretty magical so I'm not surprised it's a factor here. The reason I created a CRA app is to just create a small demo of the same behavior I'm seeing in my real app at work. That app doesn't use CRA, so I'll have to figure out what is causing it to go astray. I didn't know about --debug-webpack-config, that should be handy.

This isn't blocking me. I'm happy to just configure webpack manually. But it looks like these presets are new? So I figured I'd report this in case you all weren't aware.

Thanks for the quick response!

EDIT: and to address some of your questions. Logging conflicting rules would be super helpful. For preset-cra, are you proposing the CRA team extract out their webpack config for situations like this? Worth talking to them about it, but on the surface seems to go against CRA's "singular" approach?

No wait, cra-config looks to be a separate package storybook is taking advantage of. Then yeah, based on that your idea sounds pretty solid to me.

[shilman]

Yeah really appreciate the issue and the repro. Even if you're not using CRA yourself, it's probably the most common use case among all our users!

[EdenTurgeman]

It seems to also happen without CRA can't get the proptable to show unless I configure react-docgen-typescript-loader on my own with storybook's webpack.