[Bug]: `vue-component-meta` does not work in monorepo about storybook

[weikinhuang]

Hi @vanessayuenn we're also running into this issue with our codebase. I've provided a base repro case for you to check out https://github.com/weikinhuang/storybook-26220-repro

cd packages/storybook
npm install
npm run storybook

open http://localhost:6006/

See that Example/Button has the autogenerated docs, which was created by npx storybook init, while Core/Button3 which lives outside the packages directory does not have the auto docs even though it's 99% copy pasted from the Button component.

This repo was made with npx storybook@latest init.

[thomasaull]

@weikinhuang Thanks for providing a repro, I didn‘t get around to do that.

[eflewis]

Adding some context to #26220 (comment) above:

We are working on a fresh installation of storybook 8 in a packages directory. Our goal is to have this storybook instance display stories for components from the ui directory, as well as from components inside that packages directory.

The issue is that components from the ui directory are able to be added properly to the storybook, but can never get their jsdoc notation converted by autodocs, and their props aren't fully interpolated into controls. This happens in any case where the component is outside of the packages directory, regardless of whether the stories file is inside packages or somewhere else

Side-by-side you can see that both button 2 (left) and button 3 (right) are nearly identical. The stories generated are very different though, with button 2 having a full complement of documented controls, and the story for button 3 having only controls for props which have args defined:

[larsrickert]

After some tests I am pretty sure that this line causes the issue:

The project root for vue-component-meta is basically set to the root of the current package so everything above this folder which includes the rest of the monorepo is not analyzed.

I am not 100% sure whats the best way to fix this. Maybe we should use the paths set in the .storybook/main.ts to check if contains ../ and adjust the project root accordingly?

[valentinpalkovic]

@kasperpeulen and @chakAs3 bringing this to your attention. I guess #26220 (comment) already described very well the problem and a potential solution.

[vanessayuenn]

a repro would certainly be helpful! cc @larsrickert @chakAs3 @kasperpeulen in case they have some insights already.

[seanogdev]

Were seeing issues in quite a large repo where were running out of memory when enabling the vue-component-meta docgen. Storybook is in the same package though, it just cant cope I guess

[chakAs3]

After some tests I am pretty sure that this line causes the issue:

it is rather the reason why it is happening, in monorepo accessing files has limitation, we can only access source from the root project ( running storybook project), @valentinpalkovic you have dealt with monorepo limitation.

[chakAs3]

I am not 100% sure whats the best way to fix this. Maybe we should use the paths set in the .storybook/main.ts to check if contains ../ and adjust the project root accordingly?

This the only solution i can see too for now. we can even define a root='../' or in case there is monorepo or any other workspace path where we have our components project, we need to be explicit otherwise in large repo with many packages we will run out of memory

[valentinpalkovic]

Usually we use the getProjectRoot function from @storybook/core-common to determine the project root, like I did here: https://github.com/storybookjs/addon-webpack5-compiler-babel/blob/main/src/preset.ts#L38

At some point we might support an env variable to manually set the project root.

[chakAs3]

At some point we might support an env variable to manually set the project root.

yes it would be better this way or pass it via the framework options