Storybook（使用 Vite/Typescript/MDX）不显示 ArgsTable

Question

我试图在 MDX 文档页面上显示带有道具的 table，但无论我尝试什么，table 只显示：“找不到此组件的输入。阅读文档>"

我尝试了几种不同的方法，但似乎没有任何改变。

我试过 react-docgen-typescript、react-docgen-typescript-vite、storybook-react-docgen-typescript-vite 和 react-docgen-typescript-plugin 的不同版本，但似乎没有什么区别。

这是我的设置：

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 },
  },
});

和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',
        '*',
      ],
    },
  },
};

非常感谢！

Answer 1

新版本的 vite 构建器现在应该可以正确处理这个问题。尝试使用 npx sb@next automigrate 升级。如果您使用的是 typescript，默认情况下将使用 react-docgen-typescript，但您可以根据需要使用 react-docgen，方法是在 typescript 选项中指定它，如 storybook docs.

Storybook（使用 Vite/Typescript/MDX）不显示 ArgsTable

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

reactjs

typescript

storybook

vite