StoryBook 插件文档："No props found for this component" 使用 TypeScript

Question

我对基于 TypeScript 和 StoryBook 的项目有疑问：

Table 具有组件属性的内容未在使用 TypeScript 的项目设置的 StoryBook "Docs" 选项卡中创建和显示。

而是显示文本“"No props found for this component"（请查看随附的屏幕截图）。

在这种情况下，我需要显示 table 和列出的属性 "name"。

我在设置中做错了什么？

代码片段

Test.tsx

import * as React from 'react';

type TestProps = {
 /**
  * Description of prop "name".
  */
  name: string;
};

export function Test({ name }: TestProps) {
  return <div>{name}</div>;
}

Test.stories.tsx

import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { Test } from './Test';

storiesOf('00_Test', module)
  .addParameters({ component: Test })
  .add('Test', () => <Test name="Hello world!" />);

系统:

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.19 => 5.3.19
    @storybook/addon-docs: ^5.3.19 => 5.3.19
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/addon-knobs: ^5.3.19 => 5.3.19
    @storybook/addon-links: ^5.3.19 => 5.3.19
    @storybook/addon-storyshots: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/react: ^5.3.19 => 5.3.19
    @storybook/theming: ^5.3.19 => 5.3.19

其他上下文

package.json

"react": "^16.12.0",
"react-dom": "^16.12.0",
  "typescript": "^3.7.5"

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-docs'
  ]
};

.storybook/webpack.config.js

module.exports = ({ config }) => {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ],
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader")
      },
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

Answer 1

我能够解决这个问题，基本上我错误地配置了 StoryBook 的 webpack.config.js，

      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },

希望能帮到别人。

完整版：

.storybook/webpack.config.js

module.exports = ({ config }) => {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ],
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader")
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

StoryBook 插件文档："No props found for this component" 使用 TypeScript

StoryBook addon-docs: "No props found for this component" using TypeScript

typescript

reactjs

storybook