问题标签 [storybook]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1124 浏览

typescript - 使用 ts-loader 的 Storybook 3.4.6 中的打字稿错误

我正在尝试使用 Typescript 运行 Storybook 3.4.6。目前我正在尝试使用ts-loader. 每当我尝试运行yarn storybook时,我都会收到错误消息:

关于我的设置的一些信息:

.storybook/config.js

.storybook/webpack.config.js

文件夹结构

故事书版本和受影响的插件

截屏: 屏幕截图 2018-06-07 在 09 22 03

0 投票
1 回答
160 浏览

javascript - 将 Next.js 升级到 v6.0.3 后 Storybook 无法编译

将 Next.js 升级到 v6.0.3 后,我之前的工作设置停止工作。

故事书版本

.stoyboojk/config.js

0 投票
5 回答
7799 浏览

reactjs - Storybook 全局 Scss 变量

CLI 工具:Storybook 框架:Vue/Nuxt

问题:我正在尝试将全局 SCSS 变量引入 Storybook Stories,以便它们以与在 Nuxt 中相同的方式运行组件,我尝试使用 sass-resources-loader 自定义 webpack 配置,但没有运气,只是想要检查是否有其他人已经解决了这个问题

0 投票
1 回答
821 浏览

create-react-app - 带有 react-scripts@next 和 css 模块的故事书

我尝试了 react-scripts@next 2.0.0-next.66cc7a90(create-react-app v2),因为添加了对 css 模块的支持。不幸的是,故事书忽略了 css 模块。我可以做任何快速修复吗?

0 投票
2 回答
8793 浏览

reactjs - 如何在故事书中注入窗口变量?

我想将一个 React 组件(称为ApplicationForm)添加到storybook中。

故事书是这样写的:

ApplicationForm是用 reduxForm 创建的。这就是为什么我需要storeaddDecorator函数中提供 a 。

不幸的是,在configureStore函数中,reducer 之一具有全局数据的依赖关系window.GLOBAL

在故事书中,我会看到以下错误:

如何在故事书中注入或模拟此类全局数据?

0 投票
0 回答
927 浏览

javascript - 未捕获的类型错误:无法读取未定义的属性“字符串”

我正在尝试在反应 UI 上安装故事书。当我运行这个命令时: npm run storybook

我收到以下错误: 在此处输入图像描述

我确实参考了这些链接 无法读取未定义的属性“字符串”| React.PropTypes | LayoutPropTypes.js 并尝试应用建议的解决方案,但它仍然给我同样的错误。我明确安装了道具类型库并在反应版本之前删除了 ^ 。react 和 prop 类型的版本如下: "react": "16.3.2", "prop-types": "^15.6.2"

我的代码如下所示:

我还错过了一些步骤吗?

0 投票
1 回答
1644 浏览

reactjs - Storybook addDecorator 不适用于 config.js?

为了实验,我将以下装饰器放入我的 Button.stories.tsx

它按预期在红色矩形顶部显示按钮。但是当我像这样在 .storybook/config.js 中放置相同的装饰器时

它没有任何效果!问题可能是由@storybook/react 版本引起的吗?当我尝试使用 typescript 制作故事书时,我不得不将此包从 3.4.8 版本升级到 4.0.0-alpha.10。以下是我的 package.json 中的一些版本:

0 投票
1 回答
2150 浏览

javascript - 在 Storybook 和 Angular 中加载 scss 文件:预期 1 个选择器或规则,是“var content = requi”

我正在尝试为我的角度项目设置故事书。但是,在尝试为组件设置第一个故事时,出现以下错误:

然后我添加了一个带有以下规则的 webpack 配置:

现在,我收到以下错误:

我的研究表明这个错误通常意味着.scss 存在多个测试,但是我没有任何其他 webpack 配置。我正在使用默认的故事书配置,这是我的 index.stories.ts:

有谁知道这个错误可能来自哪里以及我该如何解决?谢谢!

0 投票
1 回答
930 浏览

angular - 最新版本的故事书不适用于 Angular2+ 项目

我是 Storybook 的初学者。我正在使用它来测试我的组件,方法是从我的 Angular6 项目中单独隔离它们。但是在尝试运行故事书时面临问题。我的 Angular-CLI 版本如下:

在尝试将故事书用于新创建的 Angular6 项目时,当我运行命令“npm run storybook”时,我在终端上收到以下错误。请帮我解决问题。我无法弄清楚如何解决这个问题。

0 投票
1 回答
1914 浏览

reactjs - 如何在使用 Next.js 完成的外部项目中使用 Storybook 组件(和 Lerna)?

我刚刚创建了我的 Storybook 组件库(ES6 等)。它的结构是一个 Lerna 项目(所有组件都隔离在 packages/ 文件夹中)。但是,这是一个没有真正发布功能的私人仓库,所以我认为 Lerna 不能使用私人(免费)帐户。我已经将 Storybook 存储库按原样推送到了我的 Bitbucket。

现在,我想使用主应用程序中的组件故事书库,这是基于 Next.js 构建的不同存储库(在 Bitbucket 上)。

我试图按如下方式导入各个故事书组件

但它显然不起作用,返回此错误:

这是因为MyComponent是一个 jsx 文件。我希望 Next.js 能够转换导入的模块,但事实并非如此。

我的问题是:

  1. 我的胆量说将整个故事书作为git+ssh://git@bitbucket.org/myusername/storybook-repo.gitfrom导入package.json不是一个好主意。有更好的解决方案吗?

  2. Lerna 是否仅适用于我可以发布我的包的公共/专业存储库?

  3. 为什么 Next.js 不转译导入的 jsx 模块?在这一点上,这个过程是如何工作的?我应该从远程仓库转换故事书组件还是从我的主应用程序中完成这项工作?

谢谢