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

[GoodGoodJM]

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]

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]

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

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

I get this same error when my docs and stories are in different packages. I'm using Storybook for different frameworks (vue, react, etc.) of a design system. I'd like to share the same docs between all storybooks. The docs work great when they (and related stories) are housed within a single storybook. But when I try to import them from a shared package, I get:

Unable to index ./node_modules/shared-docs/component.doc.mdx:
Error: Invariant failed: Could not find or load CSF file at path "./component.stories" referenced by `of={}` in docs file "./node_modules/shared-docs/component.doc.mdx".

In the above case, .component.stories.js and component.doc.mdx are in the same folder. I've checked the questions the error asks me:

• Does that file exist? Yes
• If so, is it a CSF file (.stories.*)? Yes
• If so, is it matched by the stories glob in main.js? Yes
• If so, has the file successfully loaded in Storybook and are its stories visible? No

But I can't determine why it won't load successfully. Again, when I move everything into a single package (not pulling from node_modules), things work great.

[JReinhold]

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

@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: https://github.com/storybookjs/storybook/issues/27178

[ndelangen]

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

[ndelangen]

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

[rChaoz]

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