Create-react-app 中的故事书：typeError：args.flat 不是 function

Question

I have installed storybook in a create-react app application thanks to the command npx -p @storybook/cli sb init . Then, I added a basic story to the stories folder. When launching storybook, it crashes and says: typeError: args.flat is not a function

Here is my story:

 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} />; };

And the config:

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

I tried to replace it with a custom config:

 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);

How to fix this?

Answer 1

Upgrade your node version, any version above 12 must work.

If you are using nvm

nvm install --lts

Answer 2

There is an issue with below command that is supposed to automatically detect underlying framework. Launching storybook fails with args.flat is not a function error

npx -p @storybook/cli sb init

Use this instead

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

If you already have storybook pre-installed and face this error, overwrite it with -f command

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

Answer 3

I have experienced the same problem today and fixed it by installing Storybook v. 5.3.19 through Manual setup . Looks like there are some compatibility problems between create-react-app and Storybook 6.+ beta-versions.