[Bug]: Storybook doesn't recover after fixing syntax error in stories file

emlai commented 1 year ago

Describe the bug

When making a syntax error in a .stories.tsx file, storybook crashes with the following error:

WARN 🚨 Unable to index files:
WARN - ./../project-name/src/Switch/Switch.mdx: Invariant failed: Could not find or load CSF file at path "./Switch.stories" referenced by `of={}` in docs file "../project-name/src/Switch/Switch.mdx".
WARN     
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`?
WARN - If so, has the file successfully loaded in Storybook and are its stories visible?
WARN - ./../project-name/src/Switch/Switch.stories.tsx: Unexpected token, expected "," (33:9)
37% building 1/2 entries 258/267 dependencies 458/127 modulesUnexpected token, expected "," (33:9)
No errors found.

After fixing the syntax error, storybook is unable to recover and shows a new error:

WARN 🚨 Unable to index ./../project-name/src/Switch/Switch.mdx:
WARN   Error: Invariant failed: Could not find or load CSF file at path "./Switch.stories" referenced by `of={}` in docs file "../project-name/src/Switch/Switch.mdx".
WARN     
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`?
WARN - If so, has the file successfully loaded in Storybook and are its stories visible?
WARN     at invariant (/Users/emlai/src/repo-name/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)
WARN     at StoryIndexGenerator.extractDocs (/Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:54:7829)
WARN     at async /Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:54:2052
WARN     at async Promise.all (index 15)
WARN     at async Promise.all (index 1)
WARN     at async StoryIndexGenerator.updateExtracted (/Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:54:1684)
WARN     at async StoryIndexGenerator.ensureExtracted (/Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:54:2641)
WARN     at async StoryIndexGenerator.getIndex (/Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:59:3620)
WARN     at async /Users/emlai/src/repo-name/node_modules/.pnpm/@storybook+core-server@7.4.0/node_modules/@storybook/core-server/dist/index.js:51:5264
No errors found.

The only solution is to restart storybook.

Some issues I observe:

It's showing WARN and No errors found., but seems like this should be an error, not a warning?
When making the syntax error, Invariant failed shouldn't happen. Storybook should only report the syntax error e.g. Unexpected token, expected ","
After fixing the syntax, Invariant failed shouldn't also happen. Storybook should recover and render without errors.

To Reproduce

Create a storybook with an mdx file that imports a .stories.ts file, and make a syntax error in the stories file.

System

System:
    OS: macOS 13.5
    CPU: (12) arm64 Apple M2 Pro
  Binaries:
    Node: 20.5.1 - /opt/homebrew/bin/node
    npm: 9.8.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.6

Additional context

No response

hrigner commented 1 year ago

I have the same experience!

shilman commented 1 year ago

I just tried reproducing on a fresh Vite project and did not encounter this issue. Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

shilman commented 1 year ago

I take that back. I am able to reproduce the problem intermittently. When I create a syntax error I get the error screen, and when I fix the syntax error the story renders correctly. However, the sidebar stories sometimes disappear. When I edit the .mdx file that references the story, the sidebar stories come back. However, it looks like there are definitely some broken (hopefully edge cases) here.

emlai commented 1 year ago

Glad you were able to reproduce it. We're using the webpack builder, if it makes a difference in reproducability.

esquevin commented 1 year ago

I encounter a similar issue when when switching between branches.

Being on a feature branch I start storybook, everything works. Then I checkout another feature branch and storybook complains that it is unable to index files specific to the former branch.

And then I've to restart it which takes ~1 min on my codebase.

Would it be possible for the watcher to handle removed files too? as well as errors

esquevin commented 1 year ago

@shilman Might be a dumb suggestion, but could a band aid be to show a button on the error screen when storybook can't index a file, to trigger a new scan of all the files?

Of course it's not a proper fix, but given that meanwhile we've to manually restart storybook… it could still be a huge win.

emlai commented 1 year ago

Update: if I make any change in the story's .mdx file after the crash, then storybook recovers.

jardakotesovec commented 11 months ago

@shilman I think I am having same problem here. It breaks down as I am working on my stories and by updating stories it does not restore. I have to do some random change in mdx file for it to recover. I am currently migrating big ui library to storybook and it happens every couple of minutes and its making the process quite painful.

Latest storybook 7.5.3, with vite and vue3.

I can try to create minimal reproducible setup, but since you mentioned that you can reproduce it I not sure if its worth the time.

crispika commented 9 months ago

@shilman I have the same issue. When I edit my stories, if any syntax error occurs and then fixed, then the storybook always turns as

Error: Invariant failed: Could not find or load CSF file at path "./Tree.stories" referenced by of={} in docs file "src/Tree/Tree.mdx".

If I edit anything in my tree.mdx, then it recovers. Otherwise, I will have to restart the storybook. My repo uses rollup.js to compile my component library. Recently, I upgraded Storybook 6.5 to the latest Storybook 7 for more advanced MDX feature support.

I am wondering if any legacy mdx setting of my repo might cause this issue. Here's my pacakage.json

in 6.5 I am still using addon-docs which is included in 6.5. Everything seems work so I haven't change to as documentation recommended package '@storybook/blocks'

"@storybook/addon-docs": "^7.6.8",  
"@storybook/addon-essentials": "^7.6.8",
"@storybook/addon-mdx-gfm": "^7.6.8",
"@storybook/addon-themes": "^7.6.8",
"@storybook/react": "^7.6.8",
"@storybook/react-webpack5": "^7.6.8",
"storybook": "^7.6.8",

Also, I manually set the mdx version when I am using Storybook 6.5 by following resolution in #18094; I am wondering if upgrading the package will get me rid of the errors.

"@mdx-js/react": "^1.6.22",
"overrides": {
        "@mdx-js/react": {
            "react": "$react"
        }
    }

Really appreciate for your help!

emlai commented 8 months ago

Now this has seemingly started happening even when I'm not making a syntax error, just "normally" editing the code. So I sometimes have to edit-save-edit-save the .mdx file after each story change...

It could be caused by editor auto-save happening in the middle of editing, but not sure.

matthewdolman-afd commented 7 months ago

Also having the same problem

dmy-leanix commented 7 months ago

Same problem, Angular 17 with storybook 7, but not related to mdx file change

storybookjs / storybook