Saya memiliki masalah dengan proyek berdasarkan TypeScript dan StoryBook:

Tabel dengan properti komponen tidak dibuat dan terlihat di tab StoryBook "Docs" pada pengaturan proyek dengan TypeScript.

Dan teks ""No props found for this component" ditampilkan sebagai gantinya (silakan lihat tangkapan layar terlampir).

Saya perlu menunjukkan tabel dengan mencantumkan properti dalam hal ini "nama".

Apa yang saya lakukan salah dalam pengaturan?

enter image description here

Cuplikan kode

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.story.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!" />);

Sistem:

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

Konteks tambahan

Package.json

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

.buku cerita/main.js

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

.buku cerita/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
GibboK 28 Mei 2020, 17:20

1 menjawab

Jawaban Terbaik

Saya dapat mengatasi masalah ini, pada dasarnya saya salah mengonfigurasi webpack.config.js untuk Buku Cerita,

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

Saya berharap dapat membantu orang lain.

Versi lengkap:

.buku cerita/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;
};

0
GibboK 28 Mei 2020, 15:14