Документы-надстройки StoryBook: «Для этого компонента не найдены реквизиты» с использованием TypeScript - PullRequest
Новая
       55

Документы-надстройки StoryBook: «Для этого компонента не найдены реквизиты» с использованием TypeScript

1 голос
/ 28 мая 2020

У меня проблема с проектом, основанным на TypeScript и StoryBook:

Таблица со свойствами компонента не создается и не отображается на вкладке «Документы» StoryBook при настройке проекта с помощью TypeScript.

Вместо этого отображается текст «Для этого компонента не найдено ни одного свойства» (см. Прилагаемый снимок экрана).

Мне нужно было бы показать таблицу со списком свойств в данном случае «name».

Что я делаю не так в настройке?

enter image description here

Фрагменты кода

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

Дополнительный контекст

пакет. 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;
};

1 Ответ

0 голосов
/ 28 мая 2020

Мне удалось решить эту проблему, в основном я неправильно настроил webpack.config.js для StoryBook, 

      {
        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;
};
...