Storybook in Create-react-app: typeError: args.flat is not a function

Question

由于命令 npx -p @storybook/cli sb init，我已经在 create-react app 应用程序中安装了故事书。然后，我在 stories 文件夹中添加了一个基本故事。启动故事书时，它崩溃并显示：typeError: args.flat is not a function

这是我的故事：

import React from "react";
import Hello from "./components/Hello";
import faker from "faker";

const text = faker.internet.email();
export const Default = () => {
  return <Hello text={text} />;
};

和配置：

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

我尝试用自定义配置替换它：

import { configure } from "@storybook/react";

function loadStories() {
  const req = require.context("../src/stories", true, /\.stories\.js$/);
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

如何解决这个问题？

Answer 1

我今天遇到了同样的问题，通过 Manual setup 安装 Storybook v. 5.3.19 解决了这个问题 . create-react-app 和 Storybook 6.+ beta 版本之间似乎存在一些兼容性问题。

Answer 2

以下本应自动检测底层框架的命令存在问题。启动故事书失败，出现 args.flat is not a function 错误

npx -p @storybook/cli sb init

改用这个

npx -p @storybook/cli sb init --type react

如果您已经预装了 storybook 并遇到此错误，请使用 -f 命令覆盖它

npx -p @storybook/cli sb init --type react -f

Answer 3

升级您的节点版本，任何高于 12 的版本都必须有效。

如果您使用的是 nvm

nvm install --lts

Storybook in Create-react-app: typeError: args.flat is not a function

Storybook in Create-react-app: typeError: args.flat is not a function

reactjs

storybook