[Bug]: "Could not find CSF file at path" error with Vite builder

[dimafirsov]

Describe the bug

After installing Storybook V7 on a clean Vite project I added to src folder an arbitrary .mdx file with a reference to its corresponding CSF .stories file, just like it is shown in the docs:

import * as HelloWorldStories from './HelloWorld.stories';

<Meta of={HelloWorldStories} />

Unexpectedly, when the storybook started, I got an error saying it could not find the CSF file despite it being there.

Could not find CSF file at path "./HelloWorld.stories" referenced by of={} in docs file "src/stories/HelloWorld.mdx"

I didn't touch the stories paths in main.js which seemed to be correct.

stories: [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],

P.S. In my real project I used the MDX + CSF automigration command
npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
which resulted in the same file structure and contents, and lead to the same issues.

To Reproduce

https://stackblitz.com/edit/github-477zbc?file=src%2Fstories%2FHelloWorld.mdx

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 112.0.2
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.0.12 => 7.0.12 
    @storybook/addon-interactions: ^7.0.12 => 7.0.12 
    @storybook/addon-links: ^7.0.12 => 7.0.12 
    @storybook/blocks: ^7.0.12 => 7.0.12 
    @storybook/react: ^7.0.12 => 7.0.12 
    @storybook/react-vite: ^7.0.12 => 7.0.12 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[fsblemos]

I'm facing the same problem, but for me it was a weird behavior: it was working fine but this error was logging on console, then at a sudden it crashed.

I thought it was some change I made, then started to comment/uncomment some parts of the story until it worked again with the same code as before (but still with the console error).

The error also contains component.stories.ts: Unexpected token, expected "}" (55:17), but there's nothing wrong there, since it's the same code it was working before.

After a while, probably a coincidence, but when I resized the window it crashed again. Tried to clean all caches but without success for now.

I was using the 7.0.7 version, then upgrade to 7.0.12 but the behavior is the same.

[fsblemos]

@dimafirsov in your example, I was able to make it work by adding a export const Default = {} into the story along with the export default.

[fsblemos]

In my case, just discovered that it was the typings inside my story. I had something like:

export const Default: Story = {
  args: {},
  render: args => ({
    template: '',
    setup() {
      const groups = [
        {
          items: <ItemProps>{ // this typing
            prop: '',
          },
        }
      return {
        args,
        groups
      };
    }
  })
};

changed to items: { ... } as ItemProps and now it's stable. But it's a strange behavior the typing work eventually.

[dimafirsov]

export const Default = {}

Thanks for the help @fsblemos!

Not sure how you made it work with export const Default = {}, kinda doesn't work for me.

Also, I'm seing this a lot in the console

WARN   - Does that file exist?
WARN   - If so, is it a CSF file (`.stories.*`)?
WARN   - If so, is it matched by the `stories` glob in `main.js`?

This looks weird because it seems that all three requirements are reached.

[shilman]

This error message needs work. cc @yannbf @JReinhold

What's going on is the following:

1. Storybook tries to load the MDX file
2. Because the MDX file references a CSF file, it tries to load that also
3. The loading of the CSF file fails because there is an error in the CSF file
4. The MDX loading fails with the error above, which is misleading

In @dimafirsov 's reproduction, you can see this error by navigating to the story:

Unable to render story docs-hello-world--default as the component annotation is missing from the default export

You need to export default { component: SomeComponent,... } unless you provide a custom render function.

In @fsblemos it was a typo in the story file.

We should improve the error message in this case to make it more obvious what's going on and link to instructions for how to debug it.

[lorenzoparas]

Thanks @shilman, your solution fixed my issue!

Developing in js, I pretty much changed from

const meta = { ...blah }
export default meta

to

export default { ...blah }

where Storybook was able to detect the file properly :)

I'm thinking that the ArgTypes docs need to be updated because others such as myself and @fsblemos could be prone to copying straight from the docs and running into the same error.

It seems like the js docs already reflect my fix, I was looking at the ts docs.

[dimafirsov]

This error message needs work. cc @yannbf @JReinhold

What's going on is the following:

1. Storybook tries to load the MDX file
2. Because the MDX file references a CSF file, it tries to load that also
3. The loading of the CSF file fails because there is an error in the CSF file
4. The MDX loading fails with the error above, which is misleading

In @dimafirsov 's reproduction, you can see this error by navigating to the story:

Unable to render story docs-hello-world--default as the component annotation is missing from the default export

You need to export default { component: SomeComponent,... } unless you provide a custom render function.

In @fsblemos it was a typo in the story file.

We should improve the error message in this case to make it more obvious what's going on and link to instructions for how to debug it.

Thanks @shilman for the clarification on the issue!

Just wanted to note that MDX + CSF automigration command from the docs creates these incorrectly formatted CSF files during the mirgarion process for mdx files.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.20 containing PR #22782 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[emlai]

Still getting this error with 7.3.2

[ferriadi]

Still getting this error with 7.4.2
@shilman

[yannbf]

Hey @emlai @ferriadi could you please share a reproduction? Thanks!