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

[emlai]

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/[email protected]/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)
WARN     at StoryIndexGenerator.extractDocs (/Users/emlai/src/repo-name/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:54:7829)
WARN     at async /Users/emlai/src/repo-name/node_modules/.pnpm/@[email protected]/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/@[email protected]/node_modules/@storybook/core-server/dist/index.js:54:1684)
WARN     at async StoryIndexGenerator.ensureExtracted (/Users/emlai/src/repo-name/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:54:2641)
WARN     at async StoryIndexGenerator.getIndex (/Users/emlai/src/repo-name/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:59:3620)
WARN     at async /Users/emlai/src/repo-name/node_modules/.pnpm/@[email protected]/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]

I have the same experience!

[shilman]

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]

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]

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

[esquevin]

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]

@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]

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

[jardakotesovec]

@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]

@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]

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]

Also having the same problem

[dmy-leanix]

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