Storybook in Create-react-app: typeError: args.flat is not a 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