storybook: Storybook crashes in browser when array wrapper syntax is used inside an arrow-function component with arguments

I’m not sure my crashes are related but, removing @storybook/addon-docs eliminated them. I was seeing deep call stacks in the react-element-to-jsx-string module. See algolia/react-element-to-jsx-string#681

For us, the breaking part in the addon-docs was the Dynamic Source Code rendering for React. So I added the following in the Storybook preview.js and that fixed the issue:

export const parameters = {
  docs: {
    source: { type: 'code' }, // Default here is 'dynamic'
  },
}

Of course, the drawback here is that the Source code showing up for every story in the Docs tab will be the source code of the story itself instead of being a JSX version of it, but for us it is definitely better to have that than having to disable the addon-docs plugin entirely.

Still experiencing this issue with 7.0.6

Yes, having the same issue here. The weird thing is that I uninstalled @storybook/addon-docs and removed every single line that mentioned it in my project, and it was still being loaded in storybook! I had to manually rm -rf node_modules/@storybook/addon-docs to really make it go.

And yet…it is still freezing the browser when I have a story like this:

<Sample {...props}
      propList={[
        {el : <b>propListItem 1</b>},
        {el : <b>propListItem 2</b>},
        {el : <b>propListItem 3</b>}
      ]}
  />

Please notice that this propsList doesn’t even need to be used in the component…just by sending it as a prop is enough.

Interestingly enough (or not), if you simply move it to somewhere els (out of the story function) it works as expected.
Of course, in this case, you simply can’t use the controls to affect those elements.

const elsList = [
  {el :<b key="1">propListItem 1</b> },
  {el :<b key="3">propListItem 2</b> },
  {el :<b key="3">propListItem 3</b> },
];

<Sample {...props}
  propList={elsList}
/>

Also worth noting that if you create a function like generateList that returns that list…it will NOT work.

One more useful info.
If you use map or splice in elsList it will still work. That makes me believe it’s exclusively related to rendering child elements in the story render, not dealing with child elements in it.

I’m not sure my crashes are related but, removing @storybook/addon-docs eliminated them. I was seeing deep call stacks in the react-element-to-jsx-string module. See algolia/react-element-to-jsx-string#681

For us, the breaking part in the addon-docs was the Dynamic Source Code rendering for React. So I added the following in the Storybook preview.js and that fixed the issue:

export const parameters = {
  docs: {
    source: { type: 'code' }, // Default here is 'dynamic'
  },
}

Of course, the drawback here is that the Source code showing up for every story in the Docs tab will be the source code of the story itself instead of being a JSX version of it, but for us it is definitely better to have that than having to disable the addon-docs plugin entirely.

It’s fixed my issue. Thanks!

I think I encountered the same error. It happens in other story formats too.

import React from 'react'
import { Meta, Story } from '@storybook/react'

export default {
    title: 'Crash',
} as Meta

function Component(props: {
    foo?: Array<{bar?: React.ReactElement}>,
}) {
    return null
}

export const WorkingA: Story<unknown> = () => (
    <Component foo={[
        {bar: <div />},
    ]}/>
)

export const WorkingB: Story<{x: unknown}> = ({x}) => (
    <Component foo={[
        {},
    ]}/>
)

export const Crash: Story<{x: unknown}> = ({x}) => (
    <Component foo={[
        {bar: <div />},
    ]}/>
)

Same with 7.1.0

I’m not sure my crashes are related but, removing @storybook/addon-docs eliminated them. I was seeing deep call stacks in the react-element-to-jsx-string module. See https://github.com/algolia/react-element-to-jsx-string/issues/681

@Floffah Great idea, thank you! Sadly, this won’t help when we need dynamic props in these JSX chunks, but at least it’s possible to deal with static props.

I get the same problem with this code:

import {Canvas, Meta, Story} from "@storybook/addon-docs";
import Carousel, {CarouselPage} from "./Carousel";

<Meta title="Components/Info/Carousel" component={Carousel}/>

# Carousel

## Stories

export const CarouselStory = (args) => (
    <div className="w-[60rem]">
      <Carousel
          items={[
              <CarouselPage
                  title="Page 1"
                  message="A basic page"
                  backgroundUrl="https://palia.xyz/assets/official/s6/wallpaper/Palia__ConceptGrassland.jpg"
                  key={0}
                  _indexOnCarousel={0}
              />,
              <CarouselPage
                  title="Page 2"
                  message="Another basic page"
                  backgroundUrl="https://palia.xyz/assets/official/s6/wallpaper/Palia__ConceptGrassland.jpg"
                  key={1}
                  _indexOnCarousel={1}
              />,
          ]}
          {...args}/>
    </div>
);

### Basic

<Canvas>
    <Story
        name="Basic"
    >
        {CarouselStory.bind({})}
    </Story>
</Canvas>

as soon as i remove the items array it unfreezes

a workaround i found that fixes the problem is by changing the array function to pass the items from a separate variable:

## Stories

export const CarouselItems = [
    <CarouselPage
        title="Page 1"
        message="A basic page"
        backgroundUrl="https://palia.xyz/assets/official/s6/wallpaper/Palia__ConceptGrassland.jpg"
        key={0}
        _indexOnCarousel={0}
    />,
    <CarouselPage
        title="Page 2"
        message="Another basic page"
        backgroundUrl="https://palia.xyz/assets/official/s6/wallpaper/Palia__ConceptGrassland.jpg"
        key={1}
        _indexOnCarousel={1}
    />,
];

export const CarouselStory = (args) => (
    <div className="w-[60rem]">
        <Carousel
            items={CarouselItems}
            {...args}/>
    </div>
);