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.

Sign up for GitHub

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

Jump to bottom

Quick win: buildStoriesJson breaks storiesOf stories with error Error: CSF: unexpected storiesOf call #18640

Closed
Tallyb opened this issue Jul 6, 2022 · 9 comments
Closed

Quick win: buildStoriesJson breaks storiesOf stories with error Error: CSF: unexpected storiesOf call #18640

Tallyb opened this issue Jul 6, 2022 · 9 comments
Assignees
@sheriffMoose
Labels
bug has workaround story index

Comments

@Tallyb
Copy link

Tallyb commented Jul 6, 2022

Describe the bug
Not documented anywhere - if you are setting buildStoriesJson to true, you cannot define stories with storiesOf

To Reproduce
Create a story with storiesOf and set buildStoriesJson in main to true

System
OS: macOS 12.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.13.2 - ~/.nvm/versions/node/v18.4.0/bin/npm
Browsers:
Chrome: 103.0.5060.114
Firefox: 97.0
Safari: 15.5
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/angular: ^6.5.9 => 6.5.9
@storybook/builder-webpack5: ^6.5.9 => 6.5.9
@storybook/jest: ^0.0.10 => 0.0.10
@storybook/manager-webpack5: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13

Additional context
Add any other context about the problem here.
@hacdias hacdias mentioned this issue Aug 19, 2022
Merged
@abhaykumar01234
Copy link

Facing similar issue:

WARN 🚨 Extraction error on packages/vendor-ui-core/node_modules/@storybook/addon-docs/dist/modern/frameworks/react/react-argtypes.stories.js: Error: CSF: unexpected storiesOf call /Users/abhakuma/Desktop/vendor-ui/packages/vendor-ui-core/node_modules/@storybook/addon-docs/dist/modern/frameworks/react/react-argtypes.stories.js (line 40, col 26)
WARN 
WARN More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7
/Users/abhakuma/Desktop/vendor-ui/node_modules/.pnpm/@storybook+csf-tools@6.5.11/node_modules/@storybook/csf-tools/dist/cjs/CsfFile.js:473
              throw new Error((0, _tsDedent.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              CSF: unexpected storiesOf call ", "\n\n              More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7\n            "])), formatLocation(node, self._fileName)));
                    ^

Error: CSF: unexpected storiesOf call /Users/abhakuma/Desktop/vendor-ui/packages/vendor-ui-core/node_modules/@storybook/addon-docs/dist/modern/frameworks/react/react-argtypes.stories.js (line 40, col 26)

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7
    at enter (/Users/abhakuma/Desktop/vendor-ui/node_modules/.pnpm/@storybook+csf-tools@6.5.11/node_modules/@storybook/csf-tools/dist/cjs/CsfFile.js:473:21)

@dzegarra
Copy link

dzegarra commented Jan 17, 2023 •
edited
Loading

I got a similar error when I enable the storyStoreV7 feature in Storybook v6.5.15.

I don't use storiesOf at all in my codebase.

...
info More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
info 💡 Skipping node_modules/@storybook/react/dist/cjs/client/docs/react-argtypes.stories.js: NoMetaError: CSF: missing default export /home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/react/dist/cjs/client/docs/react-argtypes.stories.js (line 1, col 0)
info 
info More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
WARN 🚨 Extraction error on node_modules/@storybook/react/dist/esm/client/docs/react-argtypes.stories.js: Error: CSF: unexpected storiesOf call /home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/react/dist/esm/client/docs/react-argtypes.stories.js (line 82, col 20)
WARN 
WARN More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7
/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/csf-tools/dist/cjs/CsfFile.js:473
              throw new Error((0, _tsDedent.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              CSF: unexpected storiesOf call ", "\n\n              More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7\n            "])), formatLocation(node, self._fileName)));
                    ^

Error: CSF: unexpected storiesOf call /home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/react/dist/esm/client/docs/react-argtypes.stories.js (line 82, col 20)

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-v7
    at enter (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/csf-tools/dist/cjs/CsfFile.js:473:21)
    at NodePath._call (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:84:31)
    at TraversalContext.visitQueue (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at traverse (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@babel/traverse/lib/index.js:50:34)
    at CsfFile.parse (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/csf-tools/dist/cjs/CsfFile.js:325:29)
    at StoryIndexGenerator.extractStories (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:127:11)
    at async Promise.all (index 65)
    at async Promise.all (index 1)
    at async StoryIndexGenerator.ensureExtracted (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:103:13)
    at async StoryIndexGenerator.initialize (/home/dzegarra/Projects/ABB20/User_Interface/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:97:5)

@dzegarra
Copy link

dzegarra commented Jan 17, 2023 •
edited
Loading

I discovered my problem! I had these paths for stories in main.js.

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  // ...
}

It was parsing even the .stories.js files in node_modules.

I changed it to:

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  // ...
}

And the error went away.

@dottorblaster
Copy link

I had the same issue right now. I think the problem is that Storybook is resolving stories inside node_modules too. I don't know if that's expected.

@dzegarra thanks for the advice, changing the path to a more specific one (not including node_modules) fixed this for me as well.

@shilman
Copy link
Member

shilman commented Jan 23, 2023

We could exclude node_modules by default, but I'd like to discuss with the team.

We could also improve the error message if we didn't want to exclude node_modules, but I'm wondering what it should say if we did. Any suggestions?

@dzegarra
Copy link

"Your include path in .storybook/main.js includes node_modules. That means Stories from your dependencies will be considered as well. Is that what you want? It's recommended to only include the paths where your Stories can find found."

@dottorblaster
Copy link

@shilman for what it's worth, excluding node_modules by default would be the way.

About the error message, yes maybe something like "this story is located inside a node_modules directory" as an enriched error message or as a warning would be amazing.

@shilman
Copy link
Member

shilman commented Feb 10, 2023

Quick win: Add a once.warn message in the StoryIndexGenerator if we detect a file from node_modules. Can fix the defaults in a later release.

@shilman shilman changed the title buildStoriesJson breaks storiesOf stories with error Error: CSF: unexpected storiesOf call Quick win: buildStoriesJson breaks storiesOf stories with error Error: CSF: unexpected storiesOf call Feb 10, 2023
@sheriffMoose sheriffMoose self-assigned this Mar 14, 2023
sheriffMoose added a commit to sheriffMoose/storybook that referenced this issue Mar 14, 2023
@sheriffMoose
fix(core): exclude node_modules stories
ccf34b6 
Closes storybookjs#18640

* [x] exclude node_modules from the glob used for indexing stories by default unless explicitly specified
* [x] show a little warning when node_modules is mentioned explicitly
@sheriffMoose sheriffMoose mentioned this issue Mar 14, 2023
Closed
3 tasks
@valentinpalkovic
Copy link
Contributor

The storiesOf API was removed in Storybook v8. Therefore, this issue is outdated and isn't relevant anymore. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sheriffMoose sheriffMoose

Labels
bug has workaround story index
Projects
Core Team Projects
Archived in project
Milestone
No milestone
7 participants
@dottorblaster @shilman @dzegarra @sheriffMoose @valentinpalkovic @Tallyb @abhaykumar01234