[Bug]: Storybook 7 scanning folders outside stories path

[bazo]

Describe the bug

I have project where the root contains backend, docker configuration, docker volumes and frontend files in frontend folder

the config file is in frontend/.storybook

import type { StorybookConfig } from "@storybook/react-vite";
import { globby } from "globby";

const config: StorybookConfig = {
	stories: async () => {
		return await globby([
			`${__dirname}/../**/*.mdx`,
			`${__dirname}/../(admin|components|portal)/**/*.stories.@(js|jsx|ts|tsx)`,
		]);
	},
	// stories: [
	// 	"!*docker/*",
	// 	`${__dirname}/../**/*.mdx`,
	// 	`${__dirname}/../(admin|components|portal)/**/*.stories.@(js|jsx|ts|tsx)`,
	// ],
	addons: [
		"@storybook/addon-links",
		"@storybook/addon-essentials",
		"@storybook/addon-interactions",
	],
	framework: {
		name: "@storybook/react-vite",
		options: {},
	},
	docs: {
		autodocs: "tag",
	},
};
export default config;

there is one example story in frontend/stories/introduction.mdx which is found

but the storybook cli is scanning other folders outside specified paths, most importantly the docker volumes where it failes on access denied as some files are created by root

the process starts, browser opens, i see the introduction story in sidebar and then the process immediately exits

the error is

info => Starting manager..
info => Serving static files from ././.yarn/cache/@storybook-manager-npm-7.0.0-beta.45-36bf73f6f6-8bd66b773c.zip/node_modules/@storybook/manager/static at /sb-common-assets
node:fs:1437
  handleErrorFromBinding(ctx);
  ^

Error: EACCES: permission denied, scandir 'project-path/docker/volumes/mysql/#innodb_redo'
    at Object.readdirSync (node:fs:1437:3)
    at NodeFS.readdirSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:25120:26)
    at makeCallSync.subPath.subPath (/tmp/12a8f9063865c3d6373e914109833c32.cjs:27394:26)
    at ZipOpenFS.makeCallSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:27497:14)
    at ZipOpenFS.readdirSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:27393:17)
    at VirtualFS.readdirSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:26641:24)
    at PosixFS.readdirSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:26641:24)
    at NodePathFS.readdirSync (/tmp/12a8f9063865c3d6373e914109833c32.cjs:26641:24)
    at GlobSync._readdir (project-path/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/sync.js:288:46)
    at GlobSync._readdirInGlobStar (project-path/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/sync.js:267:20) {
  errno: -13,
  syscall: 'scandir',
  code: 'EACCES',
  path: 'project-path/docker/volumes/mysql/#innodb_redo'
}

i don't understand why is it scanning folders that are not defined in the stories config property? doesn't matter if i just define paths or use custom function

what can i do to make this work? thanks

To Reproduce

No response

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node
    Yarn: 3.3.1 - ~/.nvm/versions/node/v19.5.0/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v19.5.0/bin/npm

Additional context

No response

[andrejilderda]

I ran into this issue in a monorepo in which I'm setting up a Storybook with composition. I created a sorta minimal repository to reproduce the issue: https://github.com/andrejilderda/storybook-7-scanning-folders-outside-stories-path

pnpm i
pnpm dev

This should start 3 Storybook instances that are accessible via http://localhost:6006/. The tree looks like this:

If you need anything else, let me know!

[tmeasday]

@bazo it's not intended to put absolute paths in the stories glob. Does it help if you drop the __dirname? Paths are relative to the main.js file anyway.

[tmeasday]

@andrejilderda - thanks for the reproduction!

In this case the issue is that there is a symlink:

• packages/react/button/node_modules/@desktop-ui/styles => packages/styles.

You probably want to exclude node_modules from your glob.

[tmeasday]

@bazo do you have a reproduction in your case?

[andrejilderda]

Thanks for looking into this @tmeasday , that was indeed the case. 🤦‍♂️

Unfortunately adding an ignore to the glob doesn't seem to work as described in this closed issue.

[tmeasday]

Perhaps you could open a new issue about that? It seems like a common use case. As a workaround I'd suggest adding several globs to avoid the node_modules rather than one large glob.

[D1no]

In this case the issue is that there is a symlink:

• packages/react/button/node_modules/@desktop-ui/styles => packages/styles.

@tmeasday Storybook has huge issues with Symlinks. See here: https://github.com/storybookjs/storybook/issues/21399

You probably want to exclude node_modules from your glob.

That wont work (without manual file lists), since nested negative look ups don't work. See here: https://github.com/storybookjs/storybook/issues/11181#issuecomment-1455449562

[tmeasday]

@D1no in this case I think is handling the symlink fine. @andrejilderda would prefer us to not! pick up the symlink in this case :)

[andrejilderda]

@tmeasday Nevermind, I managed to get it working: https://github.com/storybookjs/storybook/issues/11181#issuecomment-1474347928. Thanks for jumping in!

---

Note: the original issue of @bazo is still relevant.

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[lems3]

We have this issue in our project.

We have a project where we try to install Storybook.

We have a structure like this :

.storybook
  main.js
stories
  my-story.stories.js
docroot
  myfolder --> symlink to ../docroot

With this config :

  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx)",
  ],

When we start Storybook, it will quickly use more and more RAM, until it crashes. Removing the symlink in our docroot folder fixes the issue. But, I don't understand why, as we never intended Storybook to scan that folder...

[tmeasday]

@lems3 does it still happen if you change the stories config to not have any globs in it? (e.g. '../stories/path/to/somefile.stories.js') If it does I think this is likely an issue with webpack (or vite if you are using that), and I'm not sure what we can do about it.

[lems3]

@tmeasday The last change we tested yesterday was to switch from html-vite to html-webpack5, and the issue stopped showing.

So it seems to points out to Vite doing something under the hood. As Vite wasn't a requirement for us and we don't have expertise with it, we will probably just continue with webpack. If anyone has some expertise with Vite and can explain this behavior, that could potentially help the next person who get on this thread after some research 😄