Prop tabs have gone missing

[mildfuzz]

Summary

I have been upgrading storybook in a large monorepo design system from v7 to v10. All seemed to be going well until someone spotted that the tabs for our props have gone and I am struggling to figure out who or what controls them.

V7 main branch

V10 branch

Any pointers would be super useful.

Additional information

v7 main.ts

import path from 'path';
import dotenv from 'dotenv';
import webpack from 'webpack';
import { StorybookConfig } from '@storybook/react-webpack5';
import { scssConfigRule } from '@[org]/tooling-typescript/webpack.config';

dotenv.config({ path: '../../.env' });
const tsconfig = path.resolve(__dirname, '../tsconfig.json');

const mainConfig: StorybookConfig = {
  stories: [
    '../../../docs/consuming/**/*.mdx',
    '../../../2.ui-components/**/*.mdx',
    '../../../2.ui-components/**/*.stories.tsx',
    '../../../1.ui-foundations/**/*.mdx',
    '../../../1.ui-foundations/**/*.stories.tsx',
    '../../../3.ui-libraries/**/*.mdx',
    '../../../3.ui-libraries/**/*.stories.tsx',
    '../../../docs/contributing/**/*.mdx',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-toolbars',
    '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        babelOptions: {
          configFile: require.resolve('@[org]/tooling-typescript/babel.config.js'),
        },
      },
    },
  ],
  typescript: {
    check: true,
    checkOptions: {
      typescript: {
        configFile: tsconfig,
      },
    },
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      setDisplayName: false,
      tsconfigPath: tsconfig,
      propFilter: (prop, _component) =>
        prop.parent
          ? ['node_modules/@emotion', 'node_modules/@types/react'].every(
              (name) => prop.parent && !prop.parent.fileName.includes(name)
            )
          : true,
    },
  },
  webpackFinal: async (config) => {
    if (config.plugins) {
      config.plugins.push(
        new webpack.DefinePlugin({
          'process.env.[ORG]_EMAIL': JSON.stringify(process.env.[ORG]_EMAIL),
        })
      );
    }

    const tsRule = {
      test: /\.(tsx?|jsx?)$/,
      loader: 'ts-loader',
      options: {
        configFile: tsconfig,
        transpileOnly: true,
      },
    };

    return {
      ...config,
      module: {
        ...config.module,
        rules: [...(config.module?.rules || []), tsRule, scssConfigRule],
      },
    };
  },
};

export default mainConfig;

v10 main.ts

import path from 'path';
import { fileURLToPath } from 'url';
import dotenv from 'dotenv';
import { StorybookConfig } from '@storybook/react-vite';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
dotenv.config({ path: '../../.env' });

const mainConfig: StorybookConfig = {
  stories: [
    '../../../docs/consuming/**/*.mdx',
    '../../../1.ui-foundations/docs/**/*.mdx',
    '../../../1.ui-foundations/docs/**/*.stories.tsx',
    '../../../2.ui-components/*/docs/**/*.mdx',
    '../../../2.ui-components/*/docs/**/*.stories.tsx',
    '../../../3.ui-libraries/*/docs/**/*.mdx',
    '../../../3.ui-libraries/*/docs/**/*.stories.tsx',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  staticDirs: ['../public'],
  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-docs'],
  typescript: {
    check: false,
    reactDocgen: 'react-docgen',
  },
  viteFinal: async (config) => {
    const rootDir = path.resolve(__dirname, '../../../');
    config.resolve = config.resolve || {};
    config.resolve.symlinks = true;
    config.resolve.alias = config.resolve.alias || {};

    const componentPackages = [
      '[REDACTED]',
      // ...
    ];

    Object.assign(config.resolve.alias, {
      '@[org]/foundations': path.resolve(rootDir, '1.ui-foundations'),
      '@[org]/react': path.resolve(rootDir, '3.ui-libraries/react'),
      '@[org]/tooling-storybook': path.resolve(rootDir, 'tooling/storybook'),
      '@[org]/tooling-typescript': path.resolve(rootDir, 'tooling/typescript'),
      '@[org]/tooling-react': path.resolve(rootDir, 'tooling/react'),
      '@[org]/js-helpers': path.resolve(rootDir, '3.ui-libraries/helpers'),
      '@[org]/doc-utils': path.resolve(rootDir, '4.site-docs/utils'),
    });

    componentPackages.forEach((pkg) => {
      (config.resolve.alias as Record<string, string>)[`@[org]/${pkg}-react`] =
        path.resolve(rootDir, `2.ui-components/${pkg}/ui-react`);
      (config.resolve.alias as Record<string, string>)[`@[org]/${pkg}-styles`] =
        path.resolve(rootDir, `2.ui-components/${pkg}/styles`);
    });

    config.optimizeDeps = config.optimizeDeps || {};
    config.optimizeDeps.include = config.optimizeDeps.include || [];
    if (!config.optimizeDeps.include.includes('@storybook/addon-docs')) {
      config.optimizeDeps.include.push('@storybook/addon-docs');
    }

    config.optimizeDeps.exclude = [
      ...(config.optimizeDeps.exclude || []),
      '@[org]/[component]-react',
      '@[org]/[component]-styles',
      // ...
      '@[org]/tooling-react',
    ];

    return config;
  },
};

export default mainConfig;

Create a reproduction

No response

[dosubot[bot]]

Hi @mildfuzz! I'm Dosu and I’m helping the storybook team.

The most likely cause is your switch from reactDocgen: 'react-docgen-typescript' (v7 config) to reactDocgen: 'react-docgen' (v10 config). In Storybook v8+, react-docgen became the default for performance reasons, but it only handles basic TypeScript constructs and often fails to extract props for complex patterns—especially in monorepos with inherited types [1].

Additionally, the tabbed prop tables you're seeing in v7 are generated by the subcomponents property in your story meta [2]. Even if that's still defined, react-docgen may not be able to resolve the types for those subcomponents.

To restore the tabs, switch back to react-docgen-typescript in your v10 main.ts:

typescript: {
  check: false,
  reactDocgen: 'react-docgen-typescript',
  reactDocgenTypescriptOptions: {
    shouldExtractLiteralValuesFromEnum: true,
    setDisplayName: false,
    // Include workspace package source files for monorepo resolution
    include: ['**/**.tsx', '../../2.ui-components/**/src/**/*.tsx'],
    propFilter: (prop) =>
      prop.parent
        ? ['node_modules/@emotion', 'node_modules/@types/react'].every(
            (name) => prop.parent && !prop.parent.fileName.includes(name)
          )
        : true,
  },
},

The include option is important in monorepo setups—without it, react-docgen-typescript may not resolve inherited props from workspace packages [3].

The trade-off is a ~4 second build time increase [4], but this is necessary for full-fidelity TypeScript prop extraction.

Could you try switching back to react-docgen-typescript and confirm whether the tabs return? If not, please also check that your story meta files still have the subcomponents property defined.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.