'Storybook (with Vite / Typescript / MDX) doesn't show ArgsTable

I'm trying to show the table with props on a MDX docs page, but whatever I try, the table only shows: "No inputs found for this component. Read the docs >"

I tried several different ways, but it doesn't seem to change anything.

I played around with different versions of react-docgen-typescript, react-docgen-typescript-vite, storybook-react-docgen-typescript-vite and react-docgen-typescript-plugin but it doesn't seem to make a difference.

This is my setup:

main.js

const { resolve } = require('path');

module.exports = {
  stories: ['../src/**/!(Template).stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  core: {
    builder: 'storybook-builder-vite',
  },
  async viteFinal(config, { configType }) {
    // customize the Vite config here

    return {
      ...config,
      base: './',
      resolve: {
        alias: {
          index: resolve(__dirname, '../', 'src', 'index'),
          Utils: resolve(__dirname, '../', 'src', 'Utils'),
          Context: resolve(__dirname, '../', 'src', 'Context'),
          Components: resolve(__dirname, '../', 'src', 'Components'),
          Tokens: resolve(__dirname, '../', 'src', 'Tokens'),
          Hooks: resolve(__dirname, '../', 'src', 'Hooks'),
        },
      },
      define: configType === 'DEVELOPMENT' && {
        'process.env': {},
        global: {},
      },
      plugins: config.plugins.filter((plugin) =>
        configType === 'DEVELOPMENT'
          ? plugin.name !== 'react-refresh'
          : plugin.name !== 'mock-core-js'
      ),
    };
  },
};

manager.js:

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme: theme,
  isFullscreen: false,
  showNav: true,
  showPanel: false,
  panelPosition: 'bottom',
  enableShortcuts: false,
  isToolshown: false,
  selectedPanel: 'Overview', // Id to select an addon panel
  initialActive: 'sidebar', // Select the default active tab on Mobile

  // Sidebar options, see below
  sidebar: {
    showRoots: true,
    collapsedRoots: ['utils', 'experimental'],
  },

  // Modify the tools in the toolbar using the addon id
  toolbar: {
    title: { hidden: true },
    zoom: { hidden: true },
    eject: { hidden: true },
    copy: { hidden: true },
    fullscreen: { hidden: true },
  },
});

and preview.jsx

import 'react-toastify/dist/ReactToastify.min.css';
import 'rc-collapse/assets/index.css';
import '../styles/cogs.less';

export const parameters = {
  viewMode: 'docs',
  backgrounds: {
    default: 'white',
    values: [
      { name: 'white', value: '#fff' },
      { name: 'black', value: '#000' },
    ],
  },
  controls: { expanded: false },
  options: {
    storySort: {
      order: [
        'Overview',
        'About Cogs.js',
        'Getting started',
        'How to contribute',
        'Design',

        'Tokens',
        'Components',
        'Patterns',
        'Layout',
        'Utils',
        '*',
      ],
    },
  },
};

Many thanks!

Solution 1:^[1]

New versions of the vite builder should handle this correctly now. Try upgrading with npx sb@next automigrate. If you're using typescript, the default will be to use react-docgen-typescript, but you can use react-docgen instead if you like, by specifying it in the typescript option, as shown in the storybook docs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	IanVS

'Storybook (with Vite / Typescript / MDX) doesn't show ArgsTable

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]