[Bug] Story template object prop containing JSX hangs the browser

[siggirh]

What version of vite are you using?

3.0.9

System info and storybook versions

System:
OS: macOS 12.5.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
Browsers:
Chrome: 104.0.5112.101
npmPackages:
@storybook/addon-essentials: 6.5.9 => 6.5.9
@storybook/addon-links: 6.5.9 => 6.5.9
@storybook/builder-vite: 0.2.2 => 0.2.2
@storybook/react: 6.5.9 => 6.5.9

Describe the Bug

Object props to a component within a story template will crash the docs window (hang the browser) without the prop even being used. I can repro this just with the basic project setup.

1. npm create vite
2. choose react and react-ts
3. y to "Do you want to run the npm7 migration on your project?"
4. npx sb init --builder @storybook/builder-vite
5. NODE_OPTIONS=--openssl-legacy-provider npm run storybook

Now everything is fine with the default components. So I edit the Header.stories.tsx file and add some random prop to the component with JSX in it as so:

- const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+ const Template: ComponentStory<typeof Header> = (args) => (
+  <Header {...args} prop={{ one: <div>one</div> }} />
+);

6. Go back to storybook and to the Header component. Click the Docs tab and now everything is frozen. Browser tab hangs and chrome asks if I want to exit the page or wait. CPU is >100% until I kill the process.

EDIT: One more thing I figured out. If I move the JSX prop out of the template component it stops hanging/crashing. So something like this works:

- const Template: ComponentStory<typeof Header> = (args) => (
-  <Header {...args} prop={{ one: <div>one</div> }} />
-);
+ function Component(args: typeof Header) {
+   return <Header {...args} prop={{ one: <div>one</div> }} />;
+ }
+ const Template: ComponentStory<typeof Header> = (args) => (
+  <Component {...args} />
+);

Looked around a bit but couldn't find another issue that sounded like a similar issue.

I didn't add a repro project since I can repro this in any project just adding a nested JSX prop to the rendered template component.

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.