Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Cannot load CSF file(.stories file) on MDX when it is placed route group('()') #25114

Closed
GoodGoodJM opened this issue Dec 5, 2023 · 8 comments

Comments

@GoodGoodJM
Copy link

GoodGoodJM commented Dec 5, 2023

Describe the bug

Cannot load CSF when it is placed in route group.

For example:

// src/routes/(auth)/signup/Page.stories.ts
import type { Meta, StoryObj } from '@storybook/svelte';
import Page from './+page.svelte';

const meta = {
	title: 'Pages/signin',
	component: Page,
	parameters: {
		layout: 'fullscreen'
	}
} satisfies Meta<Page>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};
{//  src/routes/(auth)/signup/Page.mdx}
import {Meta, Story} from '@storybook/blocks'
import * as Page from './Page.stories'

<Meta of={Page} />

<Story of={Page.Default} />

It be occured error

Unable to index ./src/routes/(auth)/signup/Page.mdx:


  Error: Invariant failed: Could not find or load CSF file at path "./Page.stories" referenced by `of={}` in docs file "src/routes/(auth)/signup/Page.mdx".
    
- Does that file exist?
- If so, is it a CSF file (`.stories.*`)?
- If so, is it matched by the `stories` glob in `main.js`?
- If so, has the file successfully loaded in Storybook and are its stories visible?
    at invariant (/Users/goodgoodman/work/wewoogo/web/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:14:11)
    at StoryIndexGenerator.extractDocs (/Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:55:3863)
    at async /Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:54:2020
    at async Promise.all (index 2)
    at async Promise.all (index 0)
    at async StoryIndexGenerator.updateExtracted (/Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:54:1653)
    at async StoryIndexGenerator.ensureExtracted (/Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:54:2609)
    at async StoryIndexGenerator.getIndex (/Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:60:3619)
    at async /Users/goodgoodman/work/wewoogo/web/node_modules/@storybook/core-server/dist/index.js:51:5276

After a few attempts, i checked that error occurred if stories were in the route group, regardless of the location of the MDX.

If i move stories file out of group(like src/routes/temp), Cannot find any ploblems.

To Reproduce

See:
stackblitz
repo

System

No response

Additional context

No response

@rChaoz
Copy link

rChaoz commented Apr 21, 2024

Also happening with SvelteKit. Quite annoying, because this practically does not allow stories to be placed alongside components. This requires all of my stories to be placed src/stories instead.

@JReinhold
Copy link
Contributor

@rChaoz @GoodGoodJM Could you try out Storybook v8.1.0-beta.1 and see if #22545 fixes this issue too?

npx storybook@next upgrade

@stephiescastle

This comment was marked as off-topic.

@JReinhold
Copy link
Contributor

@stephiescastle your issue sounds different than this, this issue is specifically about parentheses as part of the path to stories.

Could you open a new issue with a reproduction, possibly referencing this comment?

It could be a bug because we globally exclude node_modules from the story index at https://github.com/storybookjs/storybook/blob/next/code/lib/core-common/src/utils/common-glob-options.ts/#L4

Or it could be because the stories you're referencing are not part of your stories glob pattern in the main.js config.

@stephiescastle
Copy link

@JReinhold Thanks, I didn't catch the part about the parenthesis.

I checked the reasons you mentioned, and I don't believe those are the problem either. Here is the issue I created with a reproduction repo:
#27178

@ndelangen
Copy link
Member

@GoodGoodJM I cloned the repo you linked, then I:

  • upgraded it to the latest version of storybook
  • used pnpm to install
  • ran the storybook

And then storybook opened without any problems

I checked if it truly worked by editing src/routes/(app)/+page.svelte:
Screenshot 2024-08-14 at 14 18 43

@ndelangen
Copy link
Member

Could you have a look at if this problem indeed still exists?

@rChaoz
Copy link

rChaoz commented Aug 17, 2024

@ndelangen Just checked, the issue seems to be fixed for me on v8.2.6

@github-project-automation github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

7 participants