Storybook: Followed documentation to setup CRA + Typescript and cannot discover stories

[rohaanhamid]

I followed the documentation located at: https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-with-babel-loader

But no stories.tsx files are discovered from the stores folder. There are no errors on the browser console or the CLI.

If I move stories.tsx files inside the src folder they are discovered.

To Reproduce
Steps to reproduce the behavior:

1. Create a React app with CRA with the Typescript option
2. Follow the documentation from the link above to install typescript

Expected behavior
stories.tsx files in the stories folder should be discovered

Please note, this is a brand new project and all the config files exactly from the snippets provided in the link above.

[kevbost]

@rohaanhamid I'm not sure if your issue is the same as mine because you mention being able to move the location of your stories and saw them appear, but I spent all morning on this and finally found this commit in the storybook PRs: https://github.com/storybookjs/storybook/pull/8186

The typescript setup docs haven't been updated to reflect some changes.

The storiesOf stories were loading, but no CSF stories.

.storybook/config.ts

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('../src', true, /\.stories\.tsx?$/), module)

After I made this change all of the missing CSF stories appeared.

[rohaanhamid]

@kevbost I think you are right. I switched to storiesOf after moving the stories and that might have caused them to appear.

I will try your config.ts and see if it loads CSF stories.

[JKillian]

Hit this same issue experimenting today, where storiesOf worked, but CSF stories didn't work in TypeScript. I changed my config.js to match @kevbost's suggestion and it fixed the issue for me!

[kevbost]

FWIW, I discovered on accident that storybook files can remain as javascript if allowJs. I assumed this wouldn't work, but I reverted all of my project's storybook files back to their original js state and it ran as it previously did, except with typescript source files.

EDIT: I mention this because I'm not convinced there's benefit of having tsx stories given the difficulty of configuration. I would definitely prefer them to be typed, but at least I can move forward with a mixed codebase.

I discovered a different problem when converting a single storiesOf to CSF, where it brought my computer down to a crawl.

^ I think it's related but am not entirely sure yet. I'll write a new issue tomorrow.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mrmckeb]

Hey there, it looks like this one has been resolved. I'll close it off, but let me know if there are any further issues!