问题标签 [react-styleguidist]

我正在使用 React Styleguidedist 为我的 react 组件生成文档。在构建时，我们收到以下错误（纱线）。

错误“react-styleguidist#react-docgen-displayname-handler#react-docgen@2.x”不满足“react-docgen@3.0.0-beta6”的找到匹配

任何指针都会帮助我。

我正在尝试记录我的React 组件，并且我正在运行styleguidist 服务器和Laravel 开发服务器，但styleguidist 服务器因此错误而崩溃。

我已将styleguidist 服务器配置为在端口6060上运行以解决此问题，并且仅成功运行了一次服务器。之后我又遇到了这个问题。

我该如何解决这个问题？

我想使用“react-styleguidist”记录一个ButtonGroup渲染组件的组件。Button

我有一个 styleguidist webpack 配置，如下所示：

我知道我不需要定义常用的加载器和插件，因为 styleguidist 已经在内部添加了它们

在 内部src/components/，允许styleguidist获取我的组件的目录结构看起来有点像这样：

案例一

在我Readme.md的ButtonGroup目录中：

当我这样做时，我styleguide有一个错误说：

案例二

如上图所示，我已尝试将信息包含在example.js内部目录中，该文件包含：ButtonGroup

现在示例组件被导入到Readme.md：

引发错误：

我正在尝试使用 GraphQL 为 Styleguidist 填充假数据。我正在使用 Express 制作我的 GraphQL 服务器，但我不确定如何将 Apollo 连接到 Styleguidist？这些示例使用 index.js 文件并将根组件包装在 Apollo 的标签中。

我不确定 Styleguidist 是如何工作的，我不知道 index.js 文件在哪里。

有通过webpack配置Styleguidist的方法，但是不知道怎么用webpack来使用Apollo。

所以我的设置很简单

styleguide.config.js

每当我运行 npm run styleguide 时，我都会收到此错误：

模块解析失败：意外字符 @ 您可能需要适当的加载程序来处理此文件类型。

bootstrap.scss看起来像这样：

我知道我需要添加 SASS-loader 但我发现的示例使用不同的上下文，所以我还不能真正弄清楚它们。

当我运行应用程序本身而不是样式指南时，ps SASS 在 React Styleguide 之外工作。

我们使用 React Styleguidist 从项目组件的定义中生成文档。我们计划通过 Github 页面提供此类文档。

我们的代码片段：

按钮.tsx

自述文件.md

styleguidist build通过我们设置的 NPM 脚本运行命令后，一切正常。我们能够看到按钮，其内容回退到默认的“按钮文本”。如果我们将 markdown 文件更改为 include <Button> Default </Button>，则生成文档的开发版本可以正常工作（并且其按钮预览显示预期的“默认值”。当我们检查文档的构建版本时，我们会收到以下错误：ReferenceError: t is not defined。没有按钮显示在预览中，只有错误消息。

Styleguidist 生成文档的工作版本和错误版本之间的唯一区别是（据我们所见）在 markdown 自述文件中包含或不包含 Button 组件的子组件。

我们在这里做一些公然错误的事情吗？任何帮助或提示表示赞赏:)

我想用 markdown 记录我的代码库的其他功能和部分，并将它们解析并显示在我文档的不同部分。我怎样才能做到这一点？

将它们直接导入styleguide.config.js会导致整个文件被解析为文本。

我想在多个组件中重用一组通用的 PropTypes。就像是：

我已将此对象添加到文件中，并将其导出为命名的 export textProps。

然后我将它导入到一个组件文件中：

而组件文件styled-components用来定义一个组件：

问题是导入时 Styleguidist 指南中未显示“道具和方法”部分textProps。

当我textProps在H1文件中定义时，它按预期工作。

有没有办法定义一组通用的 PropType，将它们导入组件，并让它们出现在 Styleguidist 指南中？

我想加载本地 3rd 方 css（例如字体真棒图标）作为我的样式指南的一部分。由于许多组件使用相同的 CSS，我希望它能够自动加载并作为静态构建的一部分包含在内。

我决定使用 mini-css-extract-plugin 来完成这项工作，但 styleguidist 维护者 @sapegin 基本上告诉我，我不知道自己在做什么，并且在不提供任何帮助的情况下停止向他抱怨。所以我希望 stack-overflow 社区能帮我指出正确的方法：

styleguidist 讨论：https ://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909

我的 github 存储库演示了三种方法： https ://github.com/bugzpodder/styleguidist-local-css-example/tree/master

master：使用 mini-css-extract-plugin + 需要配置，构建和 devserver 按预期工作。

要求：没有 mini-css-extract-plugin 我无法让它工作

模板：devserver 有效，但 build 无效。我能想到的唯一解决方法是使用 publicPath 并在那里复制 css，但 publicPath 是不允许的，除非你危险地更新webpackconfig https://github.com/styleguidist/react-styleguidist/pull/956

styleguidist server完美运行（非常感谢）

我现在想构建静态 html 文件以粘贴在 github 页面中，但是..

styleguidist build似乎源自 favicons-webpack-plugin 的throwsTypeError: Cannot read property 'tapAsync' of undefined仅在我的生产 webpack 配置中使用。

似乎styleguidist build将-p标志传递给 webpack（或以其他方式导致使用此配置），但我更愿意只使用 dev 配置构建。

任何人都知道如何或是否可能？