Storybook throws error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

I have made a React library using https://tsdx.io & chose the React + TypeScript + Storybook template.

The entire code is here → https://github.com/deadcoder0904/react-typical

I get this error:

undefined is not iterable (cannot read property Symbol(Symbol.iterator)) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at __read (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:177373:46) at __spread (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:177391:24) at http://localhost:6006/main.c9781e3a7458a3b52f4d.bundle.js:77:127 at commitHookEffectListMount (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:140995:26) at commitPassiveHookEffects (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:141033:11) at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121452:14) at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121501:16) at invokeGuardedCallback (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121556:31) at flushPassiveEffectsImpl (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:144117:9) at unstable_runWithPriority (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:170649:12)

Not sure how I can get rid of it?

My storybook file ReactTypical.stories.tsx is so simple:

import React from 'react';
import { ReactTypical, Props } from '../src';

export default {
  title: 'Basic',
  steps: [
    'Hey',
    5000,
    'you',
    5000,
    'have',
    5000,
    'a',
    5000,
    'blessed',
    5000,
    'day',
  ],
  loop: Infinity,
};

// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props: Props) => <ReactTypical {...props} />;

Anyone got any ideas?

Answer 1

I found the answer. Turns out the steps variable was undefined in Storybook & was working well in the example from examples/ folder so I changed the Storybook code.

ReactTypical.stories.tsx

import React from 'react';
import { ReactTypical, Props } from '../src';

export default {
  title: 'Basic',
};

export const Default = (props: Props) => {
  return (
    <ReactTypical
      {...props}
      steps={[
        'Hey',
        500,
        'you',
        500,
        'have',
        500,
        'a',
        500,
        'blessed',
        500,
        'day',
      ]}
    />
  );
};