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

[thomasaull]

Describe the bug

I'm using the new storybook 8.0.0-beta.5 but I'm not being able to get inference of more complex props and events provided by vue-component-meta. My guess is that it has something to do with the typescript config in my project:

apps
  storybook
    tsconfig.json
  web
    src
      components
        Button.vue
  tsconfing.json

If you want I could provide a repro in case you don't have an idea already how to fix this. It's just a bit of work to rip out all the unrelated parts. Just let me know :)

To Reproduce

No response

System

No response

Additional context

No response

[vanessayuenn]

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

[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 https://github.com/storybookjs/storybook/issues/26220#issuecomment-1995166575 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:

[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

[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 https://github.com/storybookjs/storybook/issues/26220#issuecomment-1995786533 already described very well the problem and a potential solution.

[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

[vhoyer]

couldn't we set a project root by id? like, to search for the closest tsconfig in the id? maybe this could be an auto option on the framework options

[synopticum]

Is there any workaround yet to make vue-component-meta docgen work in monorepo, specifically in nx/vue?

[kasperpeulen]

cc @larsrickert