[Bug]: Typescript auto-generated controls behaves weird

[btmnk]

Describe the bug

Auto generating controls only works if there is a tsconfig.json in the root directory. I started fresh with storybook 7.5 and have a very small monorepo with only one component.

In my root directory I have a tsconfig.base.json and in my components tsconfig.json I extend that via

{
  "extends": ["../../../tsconfig.base.json"]
}

Storybook doesn't seem to pick it up tough and it's not even logging or erroring in any way that something is missing. The controls just stay empty.

My main.ts:

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

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {},
  },
};

export default config;

Initially I had reactDocgenTypescriptOptions filled with the example from https://storybook.js.org/docs/react/configure/typescript but that didn't do anything. The propFilter callback wasn't even called.

By mere chance I realized having a tsconfig.json in my root directory triggered a reload and my props were shown in the Controls panel.

I think Storybook should warn the user that no tsconfig file was found/used when the typescript option is added in the config like above.

The typescript config example also includes "compilerOptions" so at first I assumed a tsconfig.json file is not needed. But those didn't work either and had no effect.

To Reproduce

https://stackblitz.com/edit/github-b3yb1v?file=.storybook%2Fmain.ts

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.local/share/pnpm/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.7.6 - ~/.local/share/pnpm/pnpm <----- active
  npmPackages:
    @storybook/addon-essentials: ^7.5.1 => 7.5.1
    @storybook/addon-interactions: ^7.5.1 => 7.5.1
    @storybook/addon-links: ^7.5.1 => 7.5.1
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8
    @storybook/blocks: ^7.5.1 => 7.5.1
    @storybook/react: ^7.5.1 => 7.5.1
    @storybook/react-vite: ^7.5.1 => 7.5.1
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.5.1 => 7.5.1

Additional context

No response

[ctjhoa]

@btmnk Not sure what your issue exactly is but react-docgen-typescript-plugin is a webpack plugin, so it will not work for Vite. According to the release blog post https://storybook.js.org/blog/storybook-8/#improved-react-and-vue-control-autogeneration there are other tools for vite. Hope it could help you

[joshuaellis]

I think i'm hitting this too with the strapi-design-system, so just leaving a comment to keep in the loop 👍🏼