Storybook: Circular references in React prop data causes stack overflow error in v6

[jonrimmer]

Describe the bug

If a data structure with a circular reference is supplied a prop to a React component, Storybook will error with a Maximum call stack size exceeded error.

To Reproduce

1. Create a simple data structure with a circular reference:

const parent = {}
const child = {};
parent.child = child;
child.parent = parent;

1. Supply it as a prop to a React component in a Storybook story, such as the Button story created by sb init:

export const Primary = (args) => <Button data={parent} />;

Opening the story will produce an error of the form:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at sortObject (http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43938:20)
    at http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43965:21
    at Array.reduce (<anonymous>)
    at sortObject (http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43955:36)
    at http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43965:21
    at Array.reduce (<anonymous>)
    at sortObject (http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43955:36)
    at http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43965:21
    at Array.reduce (<anonymous>)
    at sortObject (http://localhost:6007/vendors~main.7760bc58b9f4eb7ba920.bundle.js:43955:36)

Expected behavior

The Story should work without errors.

Code snippets

A simple repro repo is here:

https://github.com/jonrimmer/storybook-v6-is-broken

System

  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.75
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26 
    @storybook/addon-essentials: ^6.0.26 => 6.0.26 
    @storybook/addon-links: ^6.0.26 => 6.0.26 
    @storybook/node-logger: ^6.0.26 => 6.0.26 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.26 => 6.0.26 

Additional context

This worked fine in v5. The error seems to be happened because Storybook is trying to use react-element-to-jsx-string to serialize the story. This will obviously not work with many data structures.

[shilman]

Thanks for the repro! As a temporary workaround you should be able to set the docs.source.type parameter to "code"

[shilman]

duplicate repro from @arcanis

import React from 'react';

export default {
  title: `Something`,
};

function TestComponent() {
  return <>Hello World</>;
}

const selfReferencing: { self?: any } = {};
selfReferencing.self = selfReferencing;

export const Breaks = (args: any) => {
  return (
    <>
      <TestComponent thisPropDoesntEvenExist={selfReferencing} />
    </>
  );
};

[Git-me-outta-here]

Thank you for the workaround 👍

I have had the same problem with THREEjs, the meshes have circular references.

Just to specify what @shilman means by "doc.source.type" parameter:
example