Storybook Addon-Docs 不显示代码片段

Question

我正在使用 Storybook 来可视化和记录我们的 React 组件库。除了不在文档页面中显示代码外，一切正常。

项目数据： Typescript、React、故事书

项目依赖项：

  "dependencies": {
    "@types/node": "12.11.1",
    "@types/react": "16.9.9",
    "@types/react-dom": "16.9.2",
    "@types/styled-components": "4.1.19",
    "react": "16.10.2",
    "react-dom": "16.10.2",
    "react-scripts": "3.2.0",
    "styled-components": "4.4.0",
    "typescript": "3.6.4"
  },
  "devDependencies": {
    "@babel/core": "7.6.0",
    "@storybook/addon-actions": "5.2.6",
    "@storybook/addon-console": "1.2.1",
    "@storybook/addon-docs": "5.2.6",
    "@storybook/addon-knobs": "5.2.6",
    "@storybook/addon-links": "5.2.6",
    "@storybook/addons": "5.2.6",
    "@storybook/react": "5.2.6",
    "@storybook/theming": "5.2.6",
    "@svgr/cli": "4.3.3",
    "@types/enzyme": "3.10.3",
    "@types/enzyme-adapter-react-16": "1.0.5",
    "@types/jest": "24.0.20",
    "@types/react-test-renderer": "16.9.1",
    "@types/storybook__react": "4.0.2",
    "@typescript-eslint/eslint-plugin": "2.3.0",
    "@typescript-eslint/parser": "2.5.0",
    "babel-loader": "8.0.6",
    "create-ts-index": "1.12.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "enzyme-to-json": "3.4.2",
    "eslint-config-airbnb-typescript": "6.0.0",
    "eslint-config-prettier": "6.5.0",
    "eslint-config-react": "1.1.7",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jest": "23.0.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "3.1.1",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "jest": "24.9.0",
    "jest-junit": "8.0.0",
    "jest-styled-components": "6.3.3",
    "prettier": "1.18.2",
    "react-docgen-typescript-loader": "3.3.0",
    "react-test-renderer": "16.10.2",
    "recursive-copy": "2.0.10",
    "themeprovider-storybook": "1.2.4",
    "ts-jest": "24.1.0",
    "ts-loader": "6.2.1"

问题在于，在 Storybook 的文档部分中，除了代码片段之外的所有内容都在工作 -> "No code available"

Sceenshot of the Docs Page

我在 .storybook 中的文件：

我使用 Docs React 预设 -> presets.js:

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
];

还有这个webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: path.resolve(__dirname, '..', 'node_modules'),
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [require.resolve('babel-preset-react-app')],
        },
      },
      require.resolve('react-docgen-typescript-loader'),
    ],
  });

  return config;
};

她是 config.tsx

import React, { ReactElement } from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import { withThemesProvider } from 'themeprovider-storybook';
import yourTheme from './yourTheme';
import { brightTheme, GlobalStyle } from '../src';
import './yourStyle.css';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { setConsoleOptions } = require('@storybook/addon-console');

const themes = [brightTheme];
const withGlobalStyles = (storyFn): ReactElement => {
  return (
    <>
      <GlobalStyle />
      {storyFn()}
    </>
  );
};

addParameters({ options: { theme: yourTheme } });
addDecorator(withThemesProvider(themes));
addDecorator(withGlobalStyles);

setConsoleOptions({ panelExclude: [] });

configure(require.context('../src', true, /.stories.(tsx|mdx)$/), module);

在 addons.ts 我只注册了其他插件。由于预设，我认为也不需要注册插件文档。

有人可以帮我吗？非常感谢。

Answer 1

我是通过 Storybook Github 页面的帮助找到它的。

在 preset.js 中，行 sourceLoaderOptions: null, 终止了 Story-Code-Snipped 的加载。 -> 简单删除该行即可。

Storybook Addon-Docs 不显示代码片段

Storybook Addon-Docs don´t show Code Snipped

javascript

typescript

reactjs

storybook

我在 .storybook 中的文件：